@eclipse-glsp/client 1.1.0-next.cb7168a.239 → 1.1.0-next.cc57a50.267

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

@@ -0,0 +1,55 @@
+/********************************************************************************
+ * 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 { Action, KeyListener, KeyTool, matchesKeystroke, SetUIExtensionVisibilityAction, SModelElement } from '~glsp-sprotty';
+import { BaseGLSPTool } from '../../tools/base-glsp-tool';
+import { KeyShortcutUIExtension } from './accessible-key-shortcut';
+
+@injectable()
+export class AccessibleKeyShortcutTool extends BaseGLSPTool {
+    static ID = 'accessible-key-shortcut-tool';
+
+    @inject(KeyTool) protected readonly keytool: KeyTool;
+
+    protected shortcutKeyListener = new AccessibleShortcutKeyListener();
+
+    get id(): string {
+        return AccessibleKeyShortcutTool.ID;
+    }
+
+    enable(): void {
+        this.keytool.register(this.shortcutKeyListener);
+    }
+
+    override disable(): void {
+        this.keytool.deregister(this.shortcutKeyListener);
+    }
+}
+
+export class AccessibleShortcutKeyListener extends KeyListener {
+    protected readonly token = Symbol(AccessibleShortcutKeyListener.name);
+    override keyDown(element: SModelElement, event: KeyboardEvent): Action[] {
+        if (this.matchesActivateShortcutHelpKeystroke(event)) {
+            return [SetUIExtensionVisibilityAction.create({ extensionId: KeyShortcutUIExtension.ID, visible: true })];
+        }
+        return [];
+    }
+
+    protected matchesActivateShortcutHelpKeystroke(event: KeyboardEvent): boolean {
+        return matchesKeystroke(event, 'KeyH', 'alt');
+    }
+}

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/move-zoom/move-handler.ts

@@ -0,0 +1,209 @@
+/********************************************************************************
+ * 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 { throttle } from 'lodash';
+import {
+    Action,
+    ChangeBoundsOperation,
+    IActionDispatcher,
+    IActionHandler,
+    ICommand,
+    Point,
+    SModelRoot,
+    SetViewportAction,
+    TYPES,
+    Viewport,
+    findParentByFeature,
+    isViewport
+} from '~glsp-sprotty';
+import { EditorContextService } from '../../../base/editor-context-service';
+import { SelectableBoundsAware, getElements, isSelectableAndBoundsAware } from '../../../utils/smodel-util';
+
+/**
+ * Action for triggering moving of the viewport.
+ */
+export interface MoveViewportAction extends Action {
+    kind: typeof MoveViewportAction.KIND;
+    /**
+     * used to specify the amount to be moved in the x-axis
+     */
+    moveX: number;
+    /**
+     * used to specify the amount to be moved in the y-axis
+     */
+    moveY: number;
+}
+
+export namespace MoveViewportAction {
+    export const KIND = 'moveViewportAction';
+
+    export function is(object: any): object is MoveViewportAction {
+        return Action.hasKind(object, KIND);
+    }
+
+    export function create(moveX: number, moveY: number): MoveViewportAction {
+        return { kind: KIND, moveX, moveY };
+    }
+}
+
+/**
+ * Action for triggering moving of elements.
+ */
+export interface MoveElementAction extends Action {
+    kind: typeof MoveElementAction.KIND;
+    /**
+     * used to specify the elements to be zoomed in/out
+     */
+    elementIds: string[];
+    /**
+     * used to specify the amount to be moved in the x-axis
+     */
+    moveX: number;
+    /**
+     * used to specify the amount to be moved in the y-axis
+     */
+    moveY: number;
+}
+
+export namespace MoveElementAction {
+    export const KIND = 'moveElementAction';
+
+    export function is(object: any): object is MoveElementAction {
+        return Action.hasKind(object, KIND);
+    }
+
+    export function create(elementIds: string[], moveX: number, moveY: number): MoveElementAction {
+        return { kind: KIND, elementIds, moveX, moveY };
+    }
+}
+
+/* The MoveViewportHandler class is an implementation of the IActionHandler interface that handles
+moving of the viewport. */
+@injectable()
+export class MoveViewportHandler implements IActionHandler {
+    @inject(EditorContextService)
+    protected editorContextService: EditorContextService;
+
+    @inject(TYPES.IActionDispatcher) protected dispatcher: IActionDispatcher;
+    protected readonly throttledHandleViewportMove = throttle((action: MoveViewportAction) => this.handleMoveViewport(action), 150);
+
+    handle(action: Action): void | Action | ICommand {
+        if (MoveViewportAction.is(action)) {
+            this.throttledHandleViewportMove(action);
+        }
+    }
+
+    handleMoveViewport(action: MoveViewportAction): void {
+        const viewport = findParentByFeature(this.editorContextService.modelRoot, isViewport);
+        if (!viewport) {
+            return;
+        }
+        this.dispatcher.dispatch(this.moveViewport(viewport, action.moveX, action.moveY));
+    }
+
+    protected moveViewport(viewport: SModelRoot & Viewport, offsetX: number, offSetY: number): SetViewportAction {
+        const newViewport: Viewport = {
+            scroll: {
+                x: viewport.scroll.x + offsetX,
+                y: viewport.scroll.y + offSetY
+            },
+            zoom: viewport.zoom
+        };
+
+        return SetViewportAction.create(viewport.id, newViewport, { animate: true });
+    }
+}
+
+/* The MoveElementHandler class is an implementation of the IActionHandler interface that handles
+moving elements. */
+@injectable()
+export class MoveElementHandler implements IActionHandler {
+    @inject(EditorContextService)
+    protected editorContextService: EditorContextService;
+    @inject(TYPES.IActionDispatcher) protected dispatcher: IActionDispatcher;
+    protected readonly throttledHandleElementMove = throttle((action: MoveElementAction) => this.handleMoveElement(action), 150);
+
+    handle(action: Action): void | Action | ICommand {
+        if (MoveElementAction.is(action)) {
+            this.throttledHandleElementMove(action);
+        }
+    }
+
+    handleMoveElement(action: MoveElementAction): void {
+        const viewport = findParentByFeature(this.editorContextService.modelRoot, isViewport);
+        if (!viewport) {
+            return;
+        }
+
+        const elements = getElements(this.editorContextService.modelRoot.index, action.elementIds, isSelectableAndBoundsAware);
+
+        this.dispatcher.dispatchAll(this.move(viewport, elements, action.moveX, action.moveY));
+    }
+
+    protected getBounds(element: SelectableBoundsAware, offSetX: number, offSetY: number): Point {
+        return { x: element.bounds.x + offSetX, y: element.bounds.y + offSetY };
+    }
+
+    protected adaptViewport(
+        viewport: SModelRoot & Viewport,
+        newPoint: Point,
+        moveX: number,
+        moveY: number
+    ): MoveViewportAction | undefined {
+        if (
+            newPoint.x < viewport.scroll.x ||
+            newPoint.x > viewport.scroll.x + viewport.canvasBounds.width ||
+            newPoint.y < viewport.scroll.y ||
+            newPoint.y > viewport.scroll.y + viewport.canvasBounds.height
+        ) {
+            return MoveViewportAction.create(moveX, moveY);
+        }
+        return;
+    }
+
+    protected moveElement(element: SelectableBoundsAware, offSetX: number, offSetY: number): ChangeBoundsOperation {
+        return ChangeBoundsOperation.create([
+            {
+                elementId: element.id,
+                newSize: {
+                    width: element.bounds.width,
+                    height: element.bounds.height
+                },
+                newPosition: {
+                    x: element.bounds.x + offSetX,
+                    y: element.bounds.y + offSetY
+                }
+            }
+        ]);
+    }
+
+    protected move(viewport: SModelRoot & Viewport, selectedElements: SelectableBoundsAware[], deltaX: number, deltaY: number): Action[] {
+        const results: Action[] = [];
+
+        if (selectedElements.length !== 0) {
+            selectedElements.forEach(currentElement => {
+                results.push(this.moveElement(currentElement, deltaX, deltaY));
+                const newPosition = this.getBounds(currentElement, deltaX, deltaY);
+                const viewportAction = this.adaptViewport(viewport, newPosition, deltaX, deltaY);
+                if (viewportAction) {
+                    results.push(viewportAction);
+                }
+            });
+        }
+        return results;
+    }
+}

package/src/features/accessibility/move-zoom/move-zoom-module.ts

@@ -0,0 +1,41 @@
+/********************************************************************************
+ * 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 { BindingContext, FeatureModule, configureActionHandler } from '~glsp-sprotty';
+import { MoveElementAction, MoveElementHandler, MoveViewportAction, MoveViewportHandler } from './move-handler';
+import { ZoomElementAction, ZoomElementHandler, ZoomViewportAction, ZoomViewportHandler } from './zoom-handler';
+
+/**
+ * Handles move and zoom actions.
+ */
+export const moveZoomModule = new FeatureModule((bind, unbind, isBound, rebind) => {
+    const context = { bind, unbind, isBound, rebind };
+    configureMoveZoom(context);
+});
+
+export function configureMoveZoom(context: BindingContext): void {
+    context.bind(MoveViewportHandler).toSelf().inSingletonScope();
+    context.bind(MoveElementHandler).toSelf().inSingletonScope();
+
+    context.bind(ZoomViewportHandler).toSelf().inSingletonScope();
+    context.bind(ZoomElementHandler).toSelf().inSingletonScope();
+
+    configureActionHandler(context, MoveViewportAction.KIND, MoveViewportHandler);
+    configureActionHandler(context, MoveElementAction.KIND, MoveElementHandler);
+
+    configureActionHandler(context, ZoomViewportAction.KIND, ZoomViewportHandler);
+    configureActionHandler(context, ZoomElementAction.KIND, ZoomElementHandler);
+}