@eclipse-glsp/client 1.1.0-next.fe0b297.182 → 2.0.0

package/src/base/view/view-registry.ts

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2021-2022 EclipseSource and others.
+ * 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
@@ -13,11 +13,16 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
+import { IView, ViewRegistry } from '@eclipse-glsp/sprotty';
 import { injectable } from 'inversify';
-import { IView, ViewRegistry } from 'sprotty';
 
+/**
+ * Allows to look up the IView for a given GModelElement based on its type.
+ */
 @injectable()
-export class GLSPViewRegistry extends ViewRegistry {
+export class GViewRegistry extends ViewRegistry {
+    /* Overwrite the `register` method to only log an info message (instead of thrown an error) if
+       an existing registration is overwritten */
     override register(key: string, instance: IView): void {
         if (key === undefined) {
             throw new Error('Key is undefined');

package/src/default-modules.ts

@@ -0,0 +1,171 @@
+/********************************************************************************
+ * Copyright (c) 2021-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 { Container } from 'inversify';
+import {
+    BindingContext,
+    ContainerConfiguration,
+    FeatureModule,
+    TYPES,
+    ViewerOptions,
+    buttonModule,
+    configureViewerOptions,
+    edgeIntersectionModule,
+    edgeLayoutModule,
+    expandModule,
+    fadeModule,
+    labelEditUiModule,
+    modelSourceModule,
+    resolveContainerConfiguration,
+    zorderModule
+} from '@eclipse-glsp/sprotty';
+import { defaultModule } from './base/default.module';
+import { IDiagramOptions } from './base/model/diagram-loader';
+import { boundsModule } from './features/bounds/bounds-module';
+import { commandPaletteModule } from './features/command-palette/command-palette-module';
+import { contextMenuModule } from './features/context-menu/context-menu-module';
+import { copyPasteModule } from './features/copy-paste/copy-paste-modules';
+import { decorationModule } from './features/decoration/decoration-module';
+import { exportModule } from './features/export/export-modules';
+import { typeHintsModule } from './features/hints/type-hints-module';
+import { hoverModule } from './features/hover/hover-module';
+import { labelEditModule } from './features/label-edit/label-edit-module';
+import { layoutModule } from './features/layout/layout-module';
+import { navigationModule } from './features/navigation/navigation-module';
+import { routingModule } from './features/routing/routing-module';
+import { selectModule } from './features/select/select-module';
+import { sourceModelWatcherModule } from './features/source-model-watcher/source-model-wacher-module';
+import { statusModule } from './features/status/status-module';
+import { svgMetadataModule } from './features/svg-metadata/svg-metadata-module';
+import { toolPaletteModule } from './features/tool-palette/tool-palette-module';
+import { changeBoundsToolModule } from './features/tools/change-bounds/change-boounds-tool-module';
+import { deletionToolModule } from './features/tools/deletion/deletion-tool-module';
+import { edgeCreationToolModule } from './features/tools/edge-creation/edege-creation-module';
+import { edgeEditToolModule } from './features/tools/edge-edit/edge-edit-module';
+import { marqueeSelectionToolModule } from './features/tools/marquee-selection/marquee-selection-module';
+import { nodeCreationToolModule } from './features/tools/node-creation/node-creation-module';
+import { toolFocusLossModule } from './features/tools/tool-focus-loss-module';
+import { markerNavigatorModule, validationModule } from './features/validation/validation-modules';
+import { viewportModule } from './features/viewport/viewport-modules';
+
+export const DEFAULT_MODULES = [
+    defaultModule,
+    buttonModule,
+    edgeIntersectionModule,
+    edgeLayoutModule,
+    expandModule,
+    exportModule,
+    fadeModule,
+    boundsModule,
+    commandPaletteModule,
+    contextMenuModule,
+    decorationModule,
+    labelEditModule,
+    hoverModule,
+    selectModule,
+    copyPasteModule,
+    viewportModule,
+    labelEditUiModule,
+    layoutModule,
+    markerNavigatorModule,
+    typeHintsModule,
+    modelSourceModule,
+    sourceModelWatcherModule,
+    navigationModule,
+    routingModule,
+    toolPaletteModule,
+    edgeCreationToolModule,
+    edgeEditToolModule,
+    deletionToolModule,
+    nodeCreationToolModule,
+    changeBoundsToolModule,
+    marqueeSelectionToolModule,
+    toolFocusLossModule,
+    validationModule,
+    zorderModule,
+    svgMetadataModule,
+    statusModule
+] as const;
+
+/**
+ * Wraps the {@link configureDiagramOptions} utility function in a module. Adopters can either include this
+ * module into the container {@link ModuleConfiguration} or configure the container after its creation
+ * (e.g. using the {@link configureDiagramOptions} utility function).
+ * @param options The diagram instance specific configuration options
+ * @returns The corresponding {@link FeatureModule}
+ */
+export function createDiagramOptionsModule(options: IDiagramOptions): FeatureModule {
+    return new FeatureModule((bind, unbind, isBound, rebind) => configureDiagramOptions({ bind, unbind, isBound, rebind }, options));
+}
+
+/**
+ * Utility function to bind the diagram instance specific configuration options.
+ * In addition to binding the {@link IDiagramOptions} this function also overrides the
+ * {@link ViewerOptions} to match the given client id.
+ * @param context The binding context
+ * @param options The {@link IDiagramOptions} that should be bound
+ */
+export function configureDiagramOptions(context: BindingContext, options: IDiagramOptions): void {
+    const viewerOptions: Partial<ViewerOptions> = {
+        baseDiv: options.clientId,
+        hiddenDiv: options.clientId + '_hidden'
+    };
+    configureViewerOptions(context, viewerOptions);
+
+    context.bind(TYPES.IDiagramOptions).toConstantValue(options);
+}
+
+/**
+ *  Initializes a GLSP Diagram container with the GLSP default modules and the specified custom `modules`.
+ *  Additional modules can be passed as direct arguments or as part of a {@link ModuleConfiguration}.
+ *  ```typescript
+ *  const container= createDiagramContainer(myModule1, myModule2)
+ *  // or
+ *  const container= createDiagramContainer({ add: [myModule1, myModule2]})
+ *  ```
+ *  Default modules can be excluded using {@link ModuleConfiguration}s.
+ *  This means, you can still customize the default modules in two ways.
+ *
+ * First, you can exclude default modules and add a module with your custom code.
+ *
+ * ```typescript
+ * const container = createDiagramContainer({ add:myModelSourceWatcherModule, remove: modelSourceWatcherModule} );
+ * ```
+ *
+ * Second, you can unbind or rebind implementations that are originally bound in one of the default modules.
+ *
+ * ```typescript
+ * rebind(NavigationTargetResolver).to(MyNavigationTargetResolver);
+ * ```
+ * @param container The container that should be initialized
+ * @param containerConfigurations
+ *          Custom modules to be loaded in addition to the default modules and/or default modules that should be excluded.
+ * @throws An error if the first module to load is not the `defaultModule` (or an equivalent custom replacement module)
+ * @returns The initialized container.
+ */
+export function initializeDiagramContainer(container: Container, ...containerConfigurations: ContainerConfiguration): Container {
+    const modules = resolveContainerConfiguration(...DEFAULT_MODULES, ...containerConfigurations);
+    // The `defaultModule` (or a custom replacement module with the same `featureId`) should be the first module that is
+    // loaded into the container
+    const firstModule = modules[0];
+    if (!firstModule || !(firstModule instanceof FeatureModule && firstModule.featureId === defaultModule.featureId)) {
+        throw new Error(
+            'Invalid module configuration. The first module to load should be the `defaultModule` (or an equivalent replacement module)'
+        );
+    }
+    container.load(...modules);
+    return container;
+}

package/src/features/accessibility/README.md

@@ -0,0 +1,143 @@
+# Keyboard-Only: Accessibility Features
+
+The features presented in the following are introduced for disability-aware conceptual modeling and allow basic user model interactions to be performed only with the keyboard.
+
+## Getting started
+
+In order to activate and use all of the currently provided keyboard only accessibility features, the module `accessibilityModule` needs to be in use.
+To activate and use only specific accessibility features, the respective module (see list below) needs to be in use.
+
+## Features
+
+Below is a list of the keyboard only accessibility features:<br>
+
+| Feature                    |                                           Description                                            |                                              Shortcut                                              |            Module             |
+| -------------------------- | :----------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------: | :---------------------------: |
+| Tool Palette               |                                     Accessible tool palette                                      |                                    <kbd>ALT</kbd>+<kbd>P</kbd>                                     |  `keyboardToolPaletteModule`  |
+| Graph                      |                                        Focus on the graph                                        |                                    <kbd>ALT</kbd>+<kbd>G</kbd>                                     |              `-`              |
+| Grid & Pointer             |                   Used for positioning on the canvas for creating new elements                   |                          activated through selected _Tool Palette_ entry                           |    `keyboardControlModule`    |
+| Search                     | Search for elements or edges using labels, types, etc. <br> with respective diagram highlighting |                                    <kbd>CTRL</kbd>+<kbd>F</kbd>                                    |     `searchPaletteModule`     |
+| Move                       |                       Move elements, edges or viewport into the directions                       |                 <kbd>←</kbd> \|\| <kbd>↑</kbd> \|\| <kbd>→</kbd> \|\| <kbd>↓</kbd>                 |       `moveZoomModule`        |
+| Zoom                       |         Zoom in or out gradually to elements or viewport or reset to default zoom level.         |                  <kbd>+</kbd> \|\| <kbd>-</kbd> \|\| <kbd>CTRL</kbd>+<kbd>0</kbd>                  |       `moveZoomModule`        |
+| Zoom via Grid              |              Zoom in gradually according to the direction of the selected grid box.              | <kbd>CTRL</kbd>+<kbd>+</kbd> then <kbd>+</kbd> \|\| <kbd>-</kbd> \|\| <kbd>CTRL</kbd>+<kbd>0</kbd> |       `moveZoomModule`        |
+| Resize                     |          Increase or decrease element sizes gradually or reset to default element size.          | <kbd>ALT</kbd>+<kbd>A</kbd> then <kbd>+</kbd> \|\| <kbd>-</kbd> \|\| <kbd>CTRL</kbd>+<kbd>0</kbd>  |       `resizeKeyModule`       |
+| Element Navigation         |   Navigate through the elements of the diagram (**Default** or **Position-based** Navigation).   |             <kbd>N</kbd> or <kbd>ALT</kbd>+<kbd>N</kbd> then use arrow keys to iterate             | `glspElementNavigationModule` |
+| Help                       |                           Display list of existing keyboard shortcuts                            |                                    <kbd>ALT</kbd>+<kbd>H</kbd>                                     |   `glspShortcutHelpModule`    |
+| Focus Tracker              |                        Display the current focused element on the canvas                         |                                           no key needed                                            |   `glspFocusTrackerModule`    |
+| User Notifications (Toast) |                                  Displaying user notifications                                   |                                           no key needed                                            |       `glspToastModule`       |
+
+## Usage
+
+### CRUD Modeling Operations
+
+#### Focus on the Graph
+
+-   <kbd>ALT</kbd>+<kbd>G</kbd>: Use to set the focus on the graph.
+
+#### Tool Palette
+
+The shortcut <kbd>ALT</kbd> + <kbd>P</kbd> sets the focus on the tool palette. Afterward, the characters <kbd>a</kbd> - <kbd>z</kbd> select an element or <kbd>1</kbd> - <kbd>5</kbd> for the header menu options.
+
+#### Grid + Pointer
+
+After selecting a node in the tool palette, the grid gets visible. The grid is for positioning the _pointer_ in the screen.
+
+The following shortcuts are usable:
+
+-   <kbd>1</kbd>- <kbd>9</kbd>: Position the pointer in the grid
+-   Use arrow keys (<kbd>←</kbd> || <kbd>↑</kbd> || <kbd>→</kbd> || <kbd>↓</kbd>) to move the pointer to a direction
+-   <kbd>ENTER</kbd>: Create the node
+-   <kbd>CTRL</kbd> + <kbd>ENTER</kbd>: Create multiple nodes
+
+#### Create Nodes
+
+1. <kbd>ALT</kbd> + <kbd>P</kbd>: Focus the tool palette
+2. <kbd>a</kbd> - <kbd>z</kbd>: Select a node
+3. <kbd>1</kbd> - <kbd>9</kbd>: Position the pointer in a cell
+4. Use arrow keys (<kbd>←</kbd> || <kbd>↑</kbd> || <kbd>→</kbd> || <kbd>↓</kbd>) to move the pointer to the correct position
+5. Create the node by using either
+    - <kbd>ENTER</kbd>: Create the node und finishes the operation
+    - <kbd>CTRL</kbd> + <kbd>ENTER</kbd>: Create multiple nodes
+
+#### Create Edges
+
+1. <kbd>ALT</kbd> + <kbd>P</kbd>: Focus the tool palette
+2. <kbd>a</kbd> - <kbd>z</kbd>: Select an edge
+3. Type in either **type** or **name** of node for **source**
+4. <kbd>ENTER</kbd>: Make selection
+5. Type in either **type** or **name** of node for **target**
+6. <kbd>ENTER</kbd>: Make selection
+
+#### Search
+
+The search palette allows to search labelled elements or edges that have a labelled node as source or target. The result set will be highlighted accordingly, to also be able to visually distinguish between the searched and the remaining parts of the given diagram.
+
+#### Read / Select via Search
+
+1. <kbd>CTRL</kbd> + <kbd>F</kbd>: Open the search palette
+2. In the palette's input field enter either the **type** or the **label** of nodes or edges. The arrow keys can be used to navigate in the search result list.
+3. <kbd>ENTER</kbd>: Select the node or edge that is highlighted in the search result list.
+
+### Model Exploration
+
+#### Move
+
+The move functionality can be used to move parts of the model, such as selected nodes or edges or the whole viewport in all directions.
+
+##### Steps
+
+1. Select one or multiple elements or the viewport.
+2. Use arrow keys (<kbd>←</kbd> || <kbd>↑</kbd> || <kbd>→</kbd> || <kbd>↓</kbd>) to move element(s) or viewport to the desired location.
+
+#### Zoom
+
+This zoom functionality can be used to gradually adapt the zoom level of one element, a set of elements or the
+viewport.
+
+#### Steps
+
+1. Select one or multiple elements or the viewport.
+2. Use <kbd>+</kbd> or <kbd>-</kbd> to zoom in or out gradually.
+3. <kbd>CTRL</kbd>+<kbd>0</kbd>: Set the zoom level to default.
+
+#### Zoom via Grid
+
+This zoom functionality via Grid can be used to gradually adapt the zoom level according to the direction of the selected _Grid Box_.
+
+#### Steps
+
+1. <kbd>CTRL</kbd>+<kbd>+</kbd>: Display the grid.
+2. <kbd>1</kbd>- <kbd>9</kbd>: Position the pointer in a cell to zoom.
+3. Repeat **2.)** to reach the desired zoom level.
+
+#### Resize element
+
+The resize functionality helps to set the size of the nodes, by either increasing or decreasing the size of the nodes’ shape gradually.
+
+#### Steps
+
+1. Select one or multiple elements.
+2. <kbd>ALT</kbd>+<kbd>A</kbd>: Activate the resize mode.
+3. <kbd>+</kbd> or <kbd>-</kbd> to increase or decrease the size of the element(s) gradually.
+4. <kbd>CTRL</kbd>+<kbd>0</kbd>: Set the size of the element(s) to default.
+5. <kbd>ESC</kbd>: Deactivate the resize mode.
+
+### Model Navigation
+
+For navigating through the elements of the diagram two navigation algorithms are provided.
+
+#### Default Navigation (following directions of relations)
+
+1. Select element as starting point.
+2. <kbd>N</kbd>: Activate default navigation.
+3. Use arrow keys (<kbd>←</kbd> || <kbd>↑</kbd> || <kbd>→</kbd> || <kbd>↓</kbd>) to iterate through model according to the directions of the given relations.
+
+#### Position-based Navigation (following x and y coordinates)
+
+1. Select element as starting point.
+2. <kbd>ALT</kbd>+<kbd>N</kbd>: Activate position based navigation.
+3. Use arrow keys (<kbd>←</kbd> || <kbd>↑</kbd> || <kbd>→</kbd> || <kbd>↓</kbd>) to iterate through model according to the positions of the elements, i.e. depending on the order of the elements' x and y coordinates.
+
+### Help
+
+1. <kbd>ALT</kbd>+<kbd>H</kbd>: Display list of keyboard shortcuts.

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

@@ -0,0 +1,44 @@
+/********************************************************************************
+ * 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 { FeatureModule } from '@eclipse-glsp/sprotty';
+import { configureShortcutHelpTool } from './key-shortcut/di.config';
+import { configureMoveZoom } from './move-zoom/move-zoom-module';
+import { configureResizeTools } from './resize-key-tool/resize-key-module';
+import { configureSearchPaletteModule } from './search/search-palette-module';
+import { configureViewKeyTools } from './view-key-tools/view-key-tools-module';
+import { configureKeyboardToolPaletteTool } from './keyboard-tool-palette/keyboard-tool-palette-module';
+import { configureKeyboardControlTools } from './keyboard-pointer/keyboard-pointer-module';
+import { configureElementNavigationTool } from './element-navigation/element-navigation-module';
+import { configureFocusTrackerTool } from './focus-tracker/focus-tracker-module';
+import { configureToastTool } from './toast/toast-module';
+
+/**
+ * Enables the accessibility tools for a keyboard-only-usage
+ */
+export const accessibilityModule = new FeatureModule((bind, unbind, isBound, rebind) => {
+    const context = { bind, unbind, isBound, rebind };
+    configureResizeTools(context);
+    configureViewKeyTools(context);
+    configureMoveZoom(context);
+    configureSearchPaletteModule(context);
+    configureShortcutHelpTool(context);
+    configureKeyboardToolPaletteTool(context);
+    configureKeyboardControlTools(context);
+    configureElementNavigationTool(context);
+    configureFocusTrackerTool(context);
+    configureToastTool(context);
+});

package/src/features/accessibility/actions.ts

@@ -0,0 +1,33 @@
+/********************************************************************************
+ * 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 { Action, hasStringProp } from '@eclipse-glsp/sprotty';
+
+export interface FocusDomAction extends Action {
+    kind: typeof FocusDomAction.KIND;
+    id: string;
+}
+
+export namespace FocusDomAction {
+    export const KIND = 'focusDomAction';
+
+    export function is(object: any): object is FocusDomAction {
+        return Action.hasKind(object, KIND) && hasStringProp(object, 'id');
+    }
+
+    export function create(id: string): FocusDomAction {
+        return { kind: KIND, id };
+    }
+}

package/src/features/accessibility/edge-autocomplete/action.ts

@@ -0,0 +1,34 @@
+/********************************************************************************
+ * 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 { Action, hasObjectProp, hasStringProp } from '@eclipse-glsp/sprotty';
+
+export interface SetEdgeTargetSelectionAction extends Action {
+    kind: typeof SetEdgeTargetSelectionAction.KIND;
+    elementId: string;
+    context: string;
+}
+
+export namespace SetEdgeTargetSelectionAction {
+    export const KIND = 'setEdgeTargetSelectionAction';
+
+    export function is(object: any): object is SetEdgeTargetSelectionAction {
+        return Action.hasKind(object, KIND) && hasStringProp(object, 'elementId') && hasObjectProp(object, 'context');
+    }
+
+    export function create(elementId: string, context: string): SetEdgeTargetSelectionAction {
+        return { kind: KIND, elementId, context };
+    }
+}

package/src/features/accessibility/edge-autocomplete/edge-autocomplete-context.ts

@@ -0,0 +1,24 @@
+/********************************************************************************
+ * 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 { TriggerEdgeCreationAction } from '@eclipse-glsp/sprotty';
+
+export interface EdgeAutocompleteContext {
+    role: 'source' | 'target';
+    trigger: TriggerEdgeCreationAction;
+    sourceId?: string;
+    targetId?: string;
+}

package/src/features/accessibility/edge-autocomplete/edge-autocomplete-palette.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 { injectable } from 'inversify';
+import {
+    codiconCSSString,
+    isConnectable,
+    GModelElement,
+    GModelRoot,
+    LabeledAction,
+    name,
+    SetUIExtensionVisibilityAction,
+    IActionHandler,
+    Action,
+    CreateEdgeOperation,
+    TriggerEdgeCreationAction
+} from '@eclipse-glsp/sprotty';
+import { EnableDefaultToolsAction } from '../../../base/tool-manager/tool';
+import { toArray } from 'sprotty/lib/utils/iterable';
+import { EdgeAutocompleteContext } from './edge-autocomplete-context';
+import { SearchAutocompletePalette } from '../search/search-palette';
+import { SetEdgeTargetSelectionAction } from './action';
+import { CloseReason, toActionArray } from '../../../base/auto-complete/auto-complete-widget';
+import { AutocompleteSuggestion, IAutocompleteSuggestionProvider } from '../../../base/auto-complete/autocomplete-suggestion-providers';
+import { GEdge } from '../../../model';
+
+export namespace EdgeAutocompletePaletteMetadata {
+    export const ID = 'edge-autocomplete-palette';
+}
+
+@injectable()
+export class EdgeAutocompletePalette extends SearchAutocompletePalette implements IActionHandler {
+    protected context?: EdgeAutocompleteContext;
+
+    protected readonly targetSuggestionProvider = new PossibleEdgeTargetAutocompleteSuggestionProvider();
+
+    override id(): string {
+        return EdgeAutocompletePaletteMetadata.ID;
+    }
+
+    handle(action: Action): Action | void {
+        if (TriggerEdgeCreationAction.is(action)) {
+            this.context = {
+                trigger: action,
+                role: 'source'
+            };
+            this.targetSuggestionProvider.setContext(action, this.context);
+        }
+    }
+
+    protected override onBeforeShow(containerElement: HTMLElement, root: Readonly<GModelRoot>, ...contextElementIds: string[]): void {
+        super.onBeforeShow(containerElement, root, ...contextElementIds);
+
+        this.autocompleteWidget.inputField.placeholder = `Search for ${this.context?.role} elements`;
+    }
+
+    protected override getSuggestionProviders(root: Readonly<GModelRoot>, input: string): IAutocompleteSuggestionProvider[] {
+        return [this.targetSuggestionProvider];
+    }
+
+    protected reload(): void {
+        const context = this.context;
+        this.hide();
+        this.context = context;
+        this.actionDispatcher.dispatch(
+            SetUIExtensionVisibilityAction.create({
+                extensionId: EdgeAutocompletePaletteMetadata.ID,
+                visible: true
+            })
+        );
+    }
+
+    protected override executeSuggestion(input: LabeledAction | Action[] | Action): void {
+        const action = toActionArray(input)[0] as SetEdgeTargetSelectionAction;
+
+        if (this.context?.role === 'source') {
+            this.context.sourceId = action.elementId;
+            this.context.role = 'target';
+            this.reload();
+        } else if (this.context?.role === 'target') {
+            this.context.targetId = action.elementId;
+        }
+        if (this.context?.sourceId !== undefined && this.context?.targetId !== undefined) {
+            this.actionDispatcher.dispatchAll([
+                CreateEdgeOperation.create({
+                    elementTypeId: this.context.trigger.elementTypeId,
+                    sourceElementId: this.context.sourceId,
+                    targetElementId: this.context.targetId,
+                    args: this.context.trigger.args
+                }),
+                EnableDefaultToolsAction.create()
+            ]);
+            this.hide();
+        }
+    }
+
+    protected override autocompleteHide(reason: CloseReason): void {
+        if (reason !== 'submission') {
+            this.hide();
+        }
+    }
+}
+
+@injectable()
+export class PossibleEdgeTargetAutocompleteSuggestionProvider implements IAutocompleteSuggestionProvider {
+    protected proxyEdge?: GEdge;
+    protected context?: EdgeAutocompleteContext;
+
+    setContext(triggerAction: TriggerEdgeCreationAction, edgeAutocompleteContext: EdgeAutocompleteContext): void {
+        this.proxyEdge = new GEdge();
+        this.proxyEdge.type = triggerAction.elementTypeId;
+        this.context = edgeAutocompleteContext;
+    }
+
+    isAllowedSource(element: GModelElement | undefined, role: 'source' | 'target'): boolean {
+        return element !== undefined && this.proxyEdge !== undefined && isConnectable(element) && element.canConnect(this.proxyEdge, role);
+    }
+
+    async retrieveSuggestions(root: Readonly<GModelRoot>, text: string): Promise<AutocompleteSuggestion[]> {
+        const context = this.context;
+        if (this.context === undefined) {
+            return [];
+        }
+
+        const nodes = toArray(root.index.all().filter(element => this.isAllowedSource(element, context!.role))) as GEdge[];
+        return nodes.map(node => ({
+            element: node,
+            action: {
+                label: `[${node.type}] ${name(node) ?? '<no-name>'}`,
+                actions: [SetEdgeTargetSelectionAction.create(node.id, context!.role)],
+                icon: codiconCSSString('arrow-both')
+            }
+        }));
+    }
+}