@eclipse-glsp/client 1.1.0-next.0e4a7fc.263 → 1.1.0-next.14c7209.265

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

@@ -0,0 +1,182 @@
+/********************************************************************************
+ * 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 { groupBy } from 'lodash';
+import { AbstractUIExtension, Action, IActionHandler, ICommand, matchesKeystroke, SModelRoot } from '~glsp-sprotty';
+
+export interface AccessibleKeyShortcutProvider {
+    registerShortcutKey(): void;
+}
+
+export interface AccessibleKeyShortcut {
+    shortcuts: string[];
+    description: string;
+    group: string;
+    position: number;
+}
+
+export interface SetAccessibleKeyShortcutAction extends Action {
+    kind: typeof SetAccessibleKeyShortcutAction.KIND;
+    token: string;
+    keys: AccessibleKeyShortcut[];
+}
+
+export namespace SetAccessibleKeyShortcutAction {
+    export const KIND = 'setAccessibleKeyShortcut';
+
+    export function is(object: any): object is SetAccessibleKeyShortcutAction {
+        return Action.hasKind(object, KIND);
+    }
+
+    export function create(options: { token: string; keys: AccessibleKeyShortcut[] }): SetAccessibleKeyShortcutAction {
+        return { kind: KIND, token: options.token, keys: options.keys };
+    }
+}
+
+@injectable()
+export class KeyShortcutUIExtension extends AbstractUIExtension implements IActionHandler {
+    static readonly ID = 'key-shortcut';
+    protected container: HTMLDivElement;
+    protected shortcutsContainer: HTMLDivElement;
+    protected registrations: Record<string, AccessibleKeyShortcut[]> = {};
+
+    handle(action: Action): ICommand | Action | void {
+        if (SetAccessibleKeyShortcutAction.is(action)) {
+            this.registrations[action.token] = action.keys;
+            if (this.containerElement) {
+                this.refreshUI();
+            }
+        }
+    }
+    id(): string {
+        return KeyShortcutUIExtension.ID;
+    }
+
+    containerClass(): string {
+        return KeyShortcutUIExtension.ID;
+    }
+
+    override show(root: Readonly<SModelRoot>, ...contextElementIds: string[]): void {
+        super.show(root, ...contextElementIds);
+        this.shortcutsContainer.focus();
+    }
+
+    protected refreshUI(): void {
+        this.shortcutsContainer.innerHTML = '';
+
+        const registrations = Object.values(this.registrations).flatMap(r => r);
+        registrations.sort((a, b) => {
+            if (a.group < b.group) {
+                return -1;
+            }
+            if (a.group > b.group) {
+                return 1;
+            }
+
+            return a.position - b.position;
+        });
+
+        const grouped = groupBy(registrations, k => k.group);
+
+        const groupTable = document.createElement('table');
+        const tableHead = document.createElement('thead');
+        const tableBody = document.createElement('tbody');
+
+        const headerRow = document.createElement('tr');
+        const commandCell = document.createElement('th');
+        const keybindingCell = document.createElement('th');
+
+        commandCell.classList.add('columnTitle');
+        commandCell.classList.add('columnTitle');
+
+        commandCell.innerText = 'Command';
+        keybindingCell.innerText = 'Keybinding';
+
+        headerRow.appendChild(commandCell);
+        headerRow.appendChild(keybindingCell);
+        tableHead.appendChild(headerRow);
+
+        for (const [, shortcuts] of Object.entries(grouped)) {
+            shortcuts.forEach(s => {
+                tableBody.appendChild(this.createEntry(s));
+            });
+        }
+
+        groupTable.appendChild(tableHead);
+        groupTable.appendChild(tableBody);
+
+        this.shortcutsContainer.append(groupTable);
+    }
+
+    protected getShortcutHTML(shortcuts: string[]): HTMLElement {
+        const shortcutKeys = document.createElement('span');
+        shortcutKeys.innerHTML = shortcuts.map(key => `<kbd>${key}</kbd>`).join(' + ');
+
+        return shortcutKeys;
+    }
+
+    protected createEntry(registration: AccessibleKeyShortcut): HTMLDivElement {
+        const entryRow = document.createElement('tr');
+        const shortcutElement = document.createElement('td');
+        const descElement = document.createElement('td');
+
+        const shortcut = this.getShortcutHTML(registration.shortcuts);
+        descElement.innerText = registration.description;
+
+        shortcutElement.appendChild(shortcut);
+        entryRow.appendChild(descElement);
+        entryRow.appendChild(shortcutElement);
+
+        return entryRow;
+    }
+
+    protected initializeContents(containerElement: HTMLElement): void {
+        this.container = document.createElement('div');
+        this.container.classList.add('keyboard-shortcuts-menu');
+
+        // create title
+        const menuTitle = document.createElement('h3');
+        menuTitle.classList.add('menu-header');
+        menuTitle.innerText = 'Keyboard Shortcuts';
+        this.container.appendChild(menuTitle);
+
+        const closeBtn = document.createElement('button');
+        closeBtn.id = 'key-shortcut-close-btn';
+        closeBtn.textContent = 'x';
+        closeBtn.addEventListener('click', () => {
+            this.hide();
+        });
+
+        this.container.appendChild(closeBtn);
+
+        // create shortcuts container
+        this.shortcutsContainer = document.createElement('div');
+        this.shortcutsContainer.classList.add('keyboard-shortcuts-container');
+        this.shortcutsContainer.tabIndex = 30;
+        this.shortcutsContainer.addEventListener('keydown', (event: KeyboardEvent) => {
+            if (event.key === 'Escape' || matchesKeystroke(event, 'KeyH', 'alt')) {
+                this.hide();
+            }
+        });
+
+        this.container.appendChild(this.shortcutsContainer);
+        containerElement.appendChild(this.container);
+        containerElement.ariaLabel = 'Shortcut-Menu';
+
+        this.refreshUI();
+    }
+}

package/src/features/accessibility/key-shortcut/di.config.ts

@@ -0,0 +1,35 @@
+/********************************************************************************
+ * 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 { bindAsService, BindingContext, configureActionHandler, TYPES } from '~glsp-sprotty';
+import '../../../../css/key-shortcut.css';
+import { KeyShortcutUIExtension, SetAccessibleKeyShortcutAction } from './accessible-key-shortcut';
+import { AccessibleKeyShortcutTool } from './accessible-key-shortcut-tool';
+
+/**
+ * Handles actions for displaying help/information about keyboard shortcuts.
+ */
+export const glspShortcutHelpModule = new ContainerModule((bind, unbind, isBound, rebind) => {
+    const context = { bind, unbind, isBound, rebind };
+    configureShortcutHelpTool(context);
+});
+
+export function configureShortcutHelpTool(context: BindingContext): void {
+    bindAsService(context, TYPES.IDefaultTool, AccessibleKeyShortcutTool);
+    bindAsService(context, TYPES.IUIExtension, KeyShortcutUIExtension);
+    configureActionHandler(context, SetAccessibleKeyShortcutAction.KIND, KeyShortcutUIExtension);
+}

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

@@ -17,9 +17,11 @@
 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()
@@ -31,6 +33,7 @@ export class ResizeKeyTool implements GLSPTool {
     @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);
@@ -41,6 +44,7 @@ export class ResizeKeyTool implements GLSPTool {
 
     enable(): void {
         this.keytool.register(this.resizeKeyListener);
+        this.resizeKeyListener.registerShortcutKey();
     }
 
     disable(): void {
@@ -48,13 +52,30 @@ export class ResizeKeyTool implements GLSPTool {
     }
 }
 @injectable()
-export class ResizeKeyListener extends KeyListener {
+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();

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

@@ -16,15 +16,16 @@
 
 import { inject, injectable } from 'inversify';
 import { matchesKeystroke } from 'sprotty/lib/utils/keyboard';
-import { Action, KeyListener, KeyTool, SModelElement, SetUIExtensionVisibilityAction, Tool } from '~glsp-sprotty';
+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();
-
+    protected readonly keyListener = new SearchAutocompletePaletteKeyListener(this);
+    @inject(TYPES.IActionDispatcher) readonly actionDispatcher: GLSPActionDispatcher;
     @inject(KeyTool) protected keyTool: KeyTool;
 
     get id(): string {
@@ -33,6 +34,7 @@ export class SearchAutocompletePaletteTool implements Tool {
 
     enable(): void {
         this.keyTool.register(this.keyListener);
+        this.keyListener.registerShortcutKey();
     }
 
     disable(): void {
@@ -40,7 +42,24 @@ export class SearchAutocompletePaletteTool implements Tool {
     }
 }
 
-export class SearchAutocompletePaletteKeyListener extends 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 [

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

@@ -17,10 +17,11 @@
 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 { SelectionService } from '../../../base/selection-service';
+import { AccessibleKeyShortcutProvider, SetAccessibleKeyShortcutAction } from '../key-shortcut/accessible-key-shortcut';
 import { MoveElementAction, MoveViewportAction } from '../move-zoom/move-handler';
 
 /**
@@ -37,6 +38,7 @@ export class MovementKeyTool implements GLSPTool {
     @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;
@@ -44,6 +46,7 @@ export class MovementKeyTool implements GLSPTool {
 
     enable(): void {
         this.keytool.register(this.movementKeyListener);
+        this.movementKeyListener.registerShortcutKey();
     }
 
     disable(): void {
@@ -51,13 +54,15 @@ export class MovementKeyTool implements GLSPTool {
     }
 }
 
-export class MoveKeyListener extends KeyListener {
+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) {
@@ -68,6 +73,17 @@ export class MoveKeyListener extends KeyListener {
         }
     }
 
+    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();
 

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

@@ -16,9 +16,11 @@
 
 import { inject, injectable } from 'inversify';
 import { matchesKeystroke } from 'sprotty/lib/utils/keyboard';
-import { Action, CenterAction, KeyListener, KeyTool, SModelElement } from '~glsp-sprotty';
+import { Action, CenterAction, 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 { SetAccessibleKeyShortcutAction } from '../key-shortcut/accessible-key-shortcut';
 import { ZoomElementAction, ZoomViewportAction } from '../move-zoom/zoom-handler';
 
 /**
@@ -33,6 +35,7 @@ export class ZoomKeyTool implements GLSPTool {
     protected readonly zoomKeyListener = new ZoomKeyListener(this);
 
     @inject(KeyTool) protected readonly keytool: KeyTool;
+    @inject(TYPES.IActionDispatcher) readonly actionDispatcher: GLSPActionDispatcher;
     @inject(SelectionService) selectionService: SelectionService;
 
     get id(): string {
@@ -41,6 +44,7 @@ export class ZoomKeyTool implements GLSPTool {
 
     enable(): void {
         this.keytool.register(this.zoomKeyListener);
+        this.zoomKeyListener.registerShortcutKey();
     }
 
     disable(): void {
@@ -51,11 +55,28 @@ export class ZoomKeyTool implements GLSPTool {
 export class ZoomKeyListener extends KeyListener {
     static readonly defaultZoomInFactor = 1.1;
     static readonly defaultZoomOutFactor = 0.9;
+    protected readonly token = ZoomKeyListener.name;
 
     constructor(protected tool: ZoomKeyTool) {
         super();
     }
 
+    registerShortcutKey(): void {
+        this.tool.actionDispatcher.onceModelInitialized().then(() => {
+            this.tool.actionDispatcher.dispatchAll([
+                SetAccessibleKeyShortcutAction.create({
+                    token: this.token,
+                    keys: [
+                        { shortcuts: ['+'], description: 'Zoom in to element or viewport', group: 'Zoom', position: 0 },
+                        { shortcuts: ['-'], description: 'Zoom out to element or viewport', group: 'Zoom', position: 1 },
+                        { shortcuts: ['CTRL', '0'], description: 'Reset zoom to default', group: 'Zoom', position: 2 },
+                        { shortcuts: ['CTRL', '+'], description: 'Zoom in via Grid', group: 'Zoom', position: 3 }
+                    ]
+                })
+            ]);
+        });
+    }
+
     override keyDown(element: SModelElement, event: KeyboardEvent): Action[] {
         const selectedElementIds = this.tool.selectionService.getSelectedElementIDs();
 

package/src/index.ts

@@ -46,6 +46,7 @@ export * from './features/accessibility/resize-key-tool/resize-key-tool';
 export * from './features/accessibility/view-key-tools/deselect-key-tool';
 export * from './features/accessibility/view-key-tools/movement-key-tool';
 export * from './features/accessibility/view-key-tools/zoom-key-tool';
+export * from './features/accessibility/key-shortcut/accessible-key-shortcut-tool';
 export * from './features/bounds/freeform-layout';
 export * from './features/bounds/glsp-hidden-bounds-updater';
 export * from './features/bounds/hbox-layout';