@eclipse-glsp/client 1.1.0-next.35bf56e.230 → 1.1.0-next.383e4e9.264

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

@@ -0,0 +1,127 @@
+/********************************************************************************
+ * 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, optional } from 'inversify';
+import { matchesKeystroke } from 'sprotty/lib/utils/keyboard';
+import { Action, EnableDefaultToolsAction, EnableToolsAction, 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 { IMovementRestrictor } from '../../change-bounds/movement-restrictor';
+import { AccessibleKeyShortcutProvider, SetAccessibleKeyShortcutAction } from '../key-shortcut/accessible-key-shortcut';
+import { ResizeElementAction, ResizeType } from './resize-key-handler';
+
+@injectable()
+export class ResizeKeyTool implements GLSPTool {
+    static ID = 'glsp.resize-key-tool';
+
+    isEditTool = true;
+
+    @inject(KeyTool) protected readonly keytool: KeyTool;
+    @inject(TYPES.IMovementRestrictor) @optional() readonly movementRestrictor?: IMovementRestrictor;
+    @inject(TYPES.ISnapper) @optional() readonly snapper?: ISnapper;
+    @inject(TYPES.IActionDispatcher) readonly actionDispatcher: GLSPActionDispatcher;
+    @inject(SelectionService) readonly selectionService: SelectionService;
+
+    protected resizeKeyListener: ResizeKeyListener = new ResizeKeyListener(this);
+
+    get id(): string {
+        return ResizeKeyTool.ID;
+    }
+
+    enable(): void {
+        this.keytool.register(this.resizeKeyListener);
+        this.resizeKeyListener.registerShortcutKey();
+    }
+
+    disable(): void {
+        this.keytool.deregister(this.resizeKeyListener);
+    }
+}
+@injectable()
+export class ResizeKeyListener extends KeyListener implements AccessibleKeyShortcutProvider {
+    protected isEditMode = false;
+    protected readonly token = ResizeKeyListener.name;
+
+    constructor(protected readonly tool: ResizeKeyTool) {
+        super();
+    }
+
+    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 }
+                    ]
+                })
+            ]);
+        });
+    }
+
+    override keyDown(element: SModelElement, event: KeyboardEvent): Action[] {
+        const actions = [];
+        const selectedElementsIds = this.tool.selectionService.getSelectedElementIDs();
+
+        if (this.isEditMode && this.matchesDeactivateResizeModeKeystroke(event)) {
+            this.isEditMode = false;
+            actions.push(EnableDefaultToolsAction.create());
+        }
+
+        if (selectedElementsIds.length > 0) {
+            if (!this.isEditMode && this.matchesActivateResizeModeKeystroke(event)) {
+                this.isEditMode = true;
+                actions.push(EnableToolsAction.create([ResizeKeyTool.ID]));
+            }
+
+            if (this.isEditMode) {
+                if (this.matchesIncreaseSizeKeystroke(event)) {
+                    actions.push(ResizeElementAction.create(selectedElementsIds, ResizeType.Increase));
+                } else if (this.matchesDecreaseSizeKeystroke(event)) {
+                    actions.push(ResizeElementAction.create(selectedElementsIds, ResizeType.Decrease));
+                } else if (this.matchesMinSizeKeystroke(event)) {
+                    actions.push(ResizeElementAction.create(selectedElementsIds, ResizeType.MinSize));
+                }
+            }
+        }
+        return actions;
+    }
+
+    protected matchesIncreaseSizeKeystroke(event: KeyboardEvent): boolean {
+        /** here event.key is used for '+', as keycode 187 is already declared for 'Equals' in {@link matchesKeystroke}.*/
+        return event.key === '+' || matchesKeystroke(event, 'NumpadAdd');
+    }
+
+    protected matchesActivateResizeModeKeystroke(event: KeyboardEvent): boolean {
+        return matchesKeystroke(event, 'KeyA', 'alt');
+    }
+
+    protected matchesDeactivateResizeModeKeystroke(event: KeyboardEvent): boolean {
+        return matchesKeystroke(event, 'Escape');
+    }
+
+    protected matchesMinSizeKeystroke(event: KeyboardEvent): boolean {
+        return matchesKeystroke(event, 'Digit0', 'ctrl') || matchesKeystroke(event, 'Numpad0', 'ctrl');
+    }
+
+    protected matchesDecreaseSizeKeystroke(event: KeyboardEvent): boolean {
+        return matchesKeystroke(event, 'Minus') || matchesKeystroke(event, 'NumpadSubtract');
+    }
+}

package/src/features/accessibility/search/search-palette-module.ts

@@ -0,0 +1,29 @@
+/********************************************************************************
+ * 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 { bindAsService, BindingContext, FeatureModule, TYPES } from '~glsp-sprotty';
+import { SearchAutocompletePalette } from './search-palette';
+import { SearchAutocompletePaletteTool } from './search-tool';
+
+export const searchPaletteModule = new FeatureModule((bind, _unbind, isBound, rebind) => {
+    const context = { bind, isBound, rebind };
+    configureSearchPaletteModule(context);
+});
+
+export function configureSearchPaletteModule(context: Pick<BindingContext, 'bind'>): void {
+    bindAsService(context, TYPES.IUIExtension, SearchAutocompletePalette);
+    bindAsService(context, TYPES.IDefaultTool, SearchAutocompletePaletteTool);
+}

package/src/features/accessibility/search/search-palette.ts

@@ -0,0 +1,193 @@
+/********************************************************************************
+ * 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 { injectable } from 'inversify';
+import { isEqual } from 'lodash';
+import { toArray } from 'sprotty/lib/utils/iterable';
+import {
+    Action,
+    CenterAction,
+    LabeledAction,
+    SEdge,
+    SModelElement,
+    SModelRoot,
+    SNode,
+    SelectAction,
+    SelectAllAction,
+    codiconCSSString,
+    isNameable,
+    name
+} from '~glsp-sprotty';
+import { AutocompleteSuggestion, IAutocompleteSuggestionProvider } from '../../autocomplete-palette/autocomplete-suggestion-providers';
+import { BaseAutocompletePalette } from '../../autocomplete-palette/base-autocomplete-palette';
+
+import { applyCssClasses, deleteCssClasses } from '../../../base/feedback/css-feedback';
+
+const CSS_SEARCH_HIDDEN = 'search-hidden';
+const CSS_SEARCH_HIGHLIGHTED = 'search-highlighted';
+
+export class RevealNamedElementAutocompleteSuggestionProvider implements IAutocompleteSuggestionProvider {
+    async retrieveSuggestions(root: Readonly<SModelRoot>, text: string): Promise<AutocompleteSuggestion[]> {
+        const nameables = toArray(root.index.all().filter(element => isNameable(element)));
+        return nameables.map(nameable => ({
+            element: nameable,
+            action: {
+                label: `[${nameable.type}] ${name(nameable) ?? '<no-name>'}`,
+                actions: this.getActions(nameable),
+                icon: codiconCSSString('eye')
+            }
+        }));
+    }
+
+    protected getActions(nameable: SModelElement): Action[] {
+        return [SelectAction.create({ selectedElementsIDs: [nameable.id] }), CenterAction.create([nameable.id], { retainZoom: true })];
+    }
+}
+
+export class RevealEdgeElementAutocompleteSuggestionProvider implements IAutocompleteSuggestionProvider {
+    async retrieveSuggestions(root: Readonly<SModelRoot>, text: string): Promise<AutocompleteSuggestion[]> {
+        const edges = toArray(root.index.all().filter(element => element instanceof SEdge)) as SEdge[];
+        return edges.map(edge => ({
+            element: edge,
+            action: {
+                label: `[${edge.type}]  ${this.getEdgeLabel(root, edge)}`,
+                actions: this.getActions(edge),
+                icon: codiconCSSString('arrow-both')
+            }
+        }));
+    }
+    protected getActions(edge: SEdge): Action[] {
+        return [SelectAction.create({ selectedElementsIDs: [edge.id] }), CenterAction.create([edge.sourceId, edge.targetId])];
+    }
+    protected getEdgeLabel(root: Readonly<SModelRoot>, edge: SEdge): string {
+        let sourceName = '';
+        let targetName = '';
+
+        const sourceNode = root.index.getById(edge.sourceId);
+        const targetNode = root.index.getById(edge.targetId);
+
+        if (sourceNode !== undefined) {
+            sourceName = name(sourceNode) ?? sourceNode.type;
+        }
+        if (targetNode !== undefined) {
+            targetName = name(targetNode) ?? targetNode.type;
+        }
+
+        return sourceName + ' -> ' + targetName;
+    }
+}
+@injectable()
+export class SearchAutocompletePalette extends BaseAutocompletePalette {
+    static readonly ID = 'search-autocomplete-palette';
+
+    protected cachedSuggestions: AutocompleteSuggestion[] = [];
+
+    id(): string {
+        return SearchAutocompletePalette.ID;
+    }
+
+    protected override initializeContents(containerElement: HTMLElement): void {
+        super.initializeContents(containerElement);
+
+        this.autocompleteWidget.inputField.placeholder = 'Search for elements';
+    }
+    protected getSuggestionProviders(root: Readonly<SModelRoot>, input: string): IAutocompleteSuggestionProvider[] {
+        return [new RevealNamedElementAutocompleteSuggestionProvider(), new RevealEdgeElementAutocompleteSuggestionProvider()];
+    }
+    protected async retrieveSuggestions(root: Readonly<SModelRoot>, input: string): Promise<LabeledAction[]> {
+        const providers = this.getSuggestionProviders(root, input);
+        const suggestions = (await Promise.all(providers.map(provider => provider.retrieveSuggestions(root, input)))).flat(1);
+
+        this.cachedSuggestions = suggestions;
+
+        return suggestions.map(s => s.action);
+    }
+
+    protected override async visibleSuggestionsChanged(root: Readonly<SModelRoot>, labeledActions: LabeledAction[]): Promise<void> {
+        await this.applyCSS(this.getHiddenElements(root, this.getSuggestionsFromLabeledActions(labeledActions)), CSS_SEARCH_HIDDEN);
+        await this.deleteCSS(
+            this.getSuggestionsFromLabeledActions(labeledActions).map(s => s.element),
+            CSS_SEARCH_HIDDEN
+        );
+    }
+
+    protected override async selectedSuggestionChanged(
+        root: Readonly<SModelRoot>,
+        labeledAction?: LabeledAction | undefined
+    ): Promise<void> {
+        await this.deleteAllCSS(root, CSS_SEARCH_HIGHLIGHTED);
+        if (labeledAction !== undefined) {
+            const suggestions = this.getSuggestionsFromLabeledActions([labeledAction]);
+
+            const actions: CenterAction[] = [];
+            suggestions.map(currElem => actions.push(CenterAction.create([currElem.element.id], { animate: true, retainZoom: true })));
+
+            this.actionDispatcher.dispatchAll(actions);
+            await this.applyCSS(
+                suggestions.map(s => s.element),
+                CSS_SEARCH_HIGHLIGHTED
+            );
+        }
+    }
+
+    public override show(root: Readonly<SModelRoot>, ...contextElementIds: string[]): void {
+        this.actionDispatcher.dispatch(SelectAllAction.create(false));
+
+        super.show(root, ...contextElementIds);
+    }
+
+    public override hide(): void {
+        if (this.root !== undefined) {
+            this.deleteAllCSS(this.root, CSS_SEARCH_HIDDEN);
+            this.deleteAllCSS(this.root, CSS_SEARCH_HIGHLIGHTED);
+            this.autocompleteWidget.inputField.value = '';
+        }
+
+        super.hide();
+    }
+
+    protected applyCSS(elements: SModelElement[], cssClass: string): Promise<void> {
+        const actions = elements.map(element => applyCssClasses(element, cssClass));
+        return this.actionDispatcher.dispatchAll(actions);
+    }
+
+    protected deleteCSS(elements: SModelElement[], cssClass: string): Promise<void> {
+        const actions = elements.map(element => deleteCssClasses(element, cssClass));
+        return this.actionDispatcher.dispatchAll(actions);
+    }
+
+    protected deleteAllCSS(root: Readonly<SModelRoot>, cssClass: string): Promise<void> {
+        const actions = toArray(root.index.all().map(element => deleteCssClasses(element, cssClass)));
+        return this.actionDispatcher.dispatchAll(actions);
+    }
+
+    protected getSuggestionsFromLabeledActions(labeledActions: LabeledAction[]): AutocompleteSuggestion[] {
+        return this.cachedSuggestions.filter(c => labeledActions.find(s => isEqual(s, c.action)));
+    }
+
+    protected getHiddenSuggestionsFromLabeledActions(labeledActions: LabeledAction[]): AutocompleteSuggestion[] {
+        return this.cachedSuggestions.filter(c => !labeledActions.find(s => isEqual(s, c.action)));
+    }
+
+    protected getHiddenElements(root: Readonly<SModelRoot>, suggestions: AutocompleteSuggestion[]): SModelElement[] {
+        return toArray(
+            root.index
+                .all()
+                .filter(element => element instanceof SNode || element instanceof SEdge)
+                .filter(element => suggestions.find(suggestion => suggestion.element.id === element.id) === undefined)
+        );
+    }
+}

package/src/features/accessibility/search/search-tool.ts

@@ -0,0 +1,78 @@
+/********************************************************************************
+ * 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 { matchesKeystroke } from 'sprotty/lib/utils/keyboard';
+import { Action, KeyListener, KeyTool, SetUIExtensionVisibilityAction, SModelElement, Tool, TYPES } from '~glsp-sprotty';
+import { GLSPActionDispatcher } from '../../../base/action-dispatcher';
+import { AccessibleKeyShortcutProvider, SetAccessibleKeyShortcutAction } from '../key-shortcut/accessible-key-shortcut';
+import { SearchAutocompletePalette } from './search-palette';
+@injectable()
+export class SearchAutocompletePaletteTool implements Tool {
+    static readonly ID = 'glsp.search-autocomplete-palette-tool';
+
+    protected readonly keyListener = new SearchAutocompletePaletteKeyListener(this);
+    @inject(TYPES.IActionDispatcher) readonly actionDispatcher: GLSPActionDispatcher;
+    @inject(KeyTool) protected keyTool: KeyTool;
+
+    get id(): string {
+        return SearchAutocompletePaletteTool.ID;
+    }
+
+    enable(): void {
+        this.keyTool.register(this.keyListener);
+        this.keyListener.registerShortcutKey();
+    }
+
+    disable(): void {
+        this.keyTool.deregister(this.keyListener);
+    }
+}
+
+export class SearchAutocompletePaletteKeyListener extends KeyListener implements AccessibleKeyShortcutProvider {
+    protected readonly token = SearchAutocompletePalette.name;
+
+    constructor(protected tool: SearchAutocompletePaletteTool) {
+        super();
+    }
+
+    registerShortcutKey(): void {
+        this.tool.actionDispatcher.onceModelInitialized().then(() => {
+            this.tool.actionDispatcher.dispatchAll([
+                SetAccessibleKeyShortcutAction.create({
+                    token: this.token,
+                    keys: [{ shortcuts: ['CTRL', 'F'], description: 'Activate search for elements', group: 'Search', position: 0 }]
+                })
+            ]);
+        });
+    }
+
+    override keyDown(element: SModelElement, event: KeyboardEvent): Action[] {
+        if (this.matchesSearchActivateKeystroke(event)) {
+            return [
+                SetUIExtensionVisibilityAction.create({
+                    extensionId: SearchAutocompletePalette.ID,
+                    visible: true
+                })
+            ];
+        }
+        return [];
+    }
+
+    protected matchesSearchActivateKeystroke(event: KeyboardEvent): boolean {
+        return matchesKeystroke(event, 'KeyF', 'ctrl');
+    }
+}

package/src/features/accessibility/view-key-tools/deselect-key-tool.ts

@@ -0,0 +1,88 @@
+/********************************************************************************
+ * 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 { toArray } from 'sprotty/lib/utils/iterable';
+import { matchesKeystroke } from 'sprotty/lib/utils/keyboard';
+import {
+    Action,
+    KeyListener,
+    KeyTool,
+    SModelElement,
+    SRoutableElement,
+    SelectAction,
+    SwitchEditModeAction,
+    isSelectable
+} from '~glsp-sprotty';
+import { GLSPTool } from '../../../base/tool-manager/glsp-tool-manager';
+import { SResizeHandle } from '../../change-bounds/model';
+
+/**
+ * Deselects the element if there is no interaction possible with element.
+ */
+@injectable()
+export class DeselectKeyTool implements GLSPTool {
+    static ID = 'glsp.deselect-key-tool';
+
+    isEditTool = true;
+
+    protected readonly deselectKeyListener = new DeselectKeyListener();
+
+    @inject(KeyTool) protected readonly keytool: KeyTool;
+
+    get id(): string {
+        return DeselectKeyTool.ID;
+    }
+
+    enable(): void {
+        this.keytool.register(this.deselectKeyListener);
+    }
+
+    disable(): void {
+        this.keytool.deregister(this.deselectKeyListener);
+    }
+}
+
+export class DeselectKeyListener extends KeyListener {
+    override keyDown(target: SModelElement, event: KeyboardEvent): Action[] {
+        if (this.matchesDeselectKeystroke(event)) {
+            const isResizeHandleActive = toArray(target.root.index.all().filter(el => el instanceof SResizeHandle)).length > 0;
+
+            if (isResizeHandleActive) {
+                return [];
+            }
+
+            const deselect = toArray(target.root.index.all().filter(element => isSelectable(element) && element.selected));
+            const actions: Action[] = [];
+
+            if (deselect.length > 0) {
+                actions.push(SelectAction.create({ deselectedElementsIDs: deselect.map(e => e.id) }));
+            }
+
+            const routableDeselect = deselect.filter(e => e instanceof SRoutableElement).map(e => e.id);
+            if (routableDeselect.length > 0) {
+                actions.push(SwitchEditModeAction.create({ elementsToDeactivate: routableDeselect }));
+            }
+
+            return actions;
+        }
+        return [];
+    }
+
+    protected matchesDeselectKeystroke(event: KeyboardEvent): boolean {
+        return matchesKeystroke(event, 'Escape');
+    }
+}

package/src/features/accessibility/view-key-tools/movement-key-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, optional } from 'inversify';
+import { matchesKeystroke } from 'sprotty/lib/utils/keyboard';
+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 { GridSnapper } from '../../change-bounds/snap';
+import { AccessibleKeyShortcutProvider, SetAccessibleKeyShortcutAction } from '../key-shortcut/accessible-key-shortcut';
+import { MoveElementAction, MoveViewportAction } from '../move-zoom/move-handler';
+
+/**
+ * Moves viewport and elements when its focused and arrow keys are hit.
+ */
+@injectable()
+export class MovementKeyTool implements GLSPTool {
+    static ID = 'glsp.movement-key-tool';
+
+    isEditTool = true;
+
+    protected readonly movementKeyListener = new MoveKeyListener(this);
+
+    @inject(KeyTool) protected readonly keytool: KeyTool;
+    @inject(SelectionService) selectionService: SelectionService;
+    @inject(TYPES.ISnapper) @optional() readonly snapper?: ISnapper;
+    @inject(TYPES.IActionDispatcher) readonly actionDispatcher: GLSPActionDispatcher;
+
+    get id(): string {
+        return MovementKeyTool.ID;
+    }
+
+    enable(): void {
+        this.keytool.register(this.movementKeyListener);
+        this.movementKeyListener.registerShortcutKey();
+    }
+
+    disable(): void {
+        this.keytool.deregister(this.movementKeyListener);
+    }
+}
+
+export class MoveKeyListener extends KeyListener implements AccessibleKeyShortcutProvider {
+    // Default x distance used if GridSnapper is not provided
+    static readonly defaultMoveX = 20;
+
+    // Default y distance used if GridSnapper is not provided
+    static readonly defaultMoveY = 20;
+
+    protected readonly token = MoveKeyListener.name;
+
+    protected grid = { x: MoveKeyListener.defaultMoveX, y: MoveKeyListener.defaultMoveY };
+
+    constructor(protected readonly tool: MovementKeyTool) {
+        super();
+
+        if (this.tool.snapper instanceof GridSnapper) {
+            this.grid = this.tool.snapper.grid;
+        }
+    }
+
+    registerShortcutKey(): void {
+        this.tool.actionDispatcher.onceModelInitialized().then(() => {
+            this.tool.actionDispatcher.dispatchAll([
+                SetAccessibleKeyShortcutAction.create({
+                    token: this.token,
+                    keys: [{ shortcuts: ['⬅  ⬆  ➡  ⬇'], description: 'Move element or viewport', group: 'Move', position: 0 }]
+                })
+            ]);
+        });
+    }
+
+    override keyDown(element: SModelElement, event: KeyboardEvent): Action[] {
+        const selectedElementIds = this.tool.selectionService.getSelectedElementIDs();
+
+        if (selectedElementIds.length > 0) {
+            if (this.matchesMoveUpKeystroke(event)) {
+                return [MoveElementAction.create(selectedElementIds, 0, -this.grid.x)];
+            } else if (this.matchesMoveDownKeystroke(event)) {
+                return [MoveElementAction.create(selectedElementIds, 0, this.grid.x)];
+            } else if (this.matchesMoveRightKeystroke(event)) {
+                return [MoveElementAction.create(selectedElementIds, this.grid.x, 0)];
+            } else if (this.matchesMoveLeftKeystroke(event)) {
+                return [MoveElementAction.create(selectedElementIds, -this.grid.x, 0)];
+            }
+        } else {
+            if (this.matchesMoveUpKeystroke(event)) {
+                return [MoveViewportAction.create(0, -this.grid.x)];
+            } else if (this.matchesMoveDownKeystroke(event)) {
+                return [MoveViewportAction.create(0, this.grid.x)];
+            } else if (this.matchesMoveRightKeystroke(event)) {
+                return [MoveViewportAction.create(this.grid.x, 0)];
+            } else if (this.matchesMoveLeftKeystroke(event)) {
+                return [MoveViewportAction.create(-this.grid.x, 0)];
+            }
+        }
+        return [];
+    }
+
+    protected matchesMoveUpKeystroke(event: KeyboardEvent): boolean {
+        return matchesKeystroke(event, 'ArrowUp');
+    }
+
+    protected matchesMoveDownKeystroke(event: KeyboardEvent): boolean {
+        return matchesKeystroke(event, 'ArrowDown');
+    }
+
+    protected matchesMoveRightKeystroke(event: KeyboardEvent): boolean {
+        return matchesKeystroke(event, 'ArrowRight');
+    }
+
+    protected matchesMoveLeftKeystroke(event: KeyboardEvent): boolean {
+        return matchesKeystroke(event, 'ArrowLeft');
+    }
+}

package/src/features/accessibility/view-key-tools/view-key-tools-module.ts

@@ -0,0 +1,31 @@
+/********************************************************************************
+ * Copyright (c) 2019-2023 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 { bindAsService, BindingContext, FeatureModule, TYPES } from '~glsp-sprotty';
+import { DeselectKeyTool } from './deselect-key-tool';
+import { MovementKeyTool } from './movement-key-tool';
+import { ZoomKeyTool } from './zoom-key-tool';
+
+export const viewKeyToolsModule = new FeatureModule((bind, _unbind, isBound, rebind) => {
+    const context = { bind, isBound, rebind };
+    configureViewKeyTools(context);
+});
+
+export function configureViewKeyTools(context: Pick<BindingContext, 'bind'>): void {
+    bindAsService(context, TYPES.IDefaultTool, MovementKeyTool);
+    bindAsService(context, TYPES.IDefaultTool, ZoomKeyTool);
+    bindAsService(context, TYPES.IDefaultTool, DeselectKeyTool);
+}