@eclipse-glsp/client 0.9.0-next.0633ee0a → 0.9.0-next.0acab46c

package/src/features/tool-feedback/edge-edit-tool-feedback.ts

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2019 EclipseSource and others.
+ * Copyright (c) 2019-2021 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,10 +13,11 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
+import { Action, Point } from '@eclipse-glsp/protocol';
 import { inject, injectable } from 'inversify';
-import { VNode } from 'snabbdom/vnode';
+import { VNode } from 'snabbdom';
 import {
-    Action,
+    add,
     AnchorComputerRegistry,
     center,
     CommandExecutionContext,
@@ -32,7 +33,6 @@ import {
     isViewport,
     MouseListener,
     MoveAction,
-    Point,
     PolylineEdgeRouter,
     SConnectableElement,
     SModelElement,
@@ -42,16 +42,10 @@ import {
     SwitchEditModeCommand,
     TYPES
 } from 'sprotty';
-
 import { isNotUndefined, isRoutable, isRoutingHandle } from '../../utils/smodel-util';
-import { getAbsolutePosition } from '../../utils/viewpoint-util';
+import { getAbsolutePosition, toAbsoluteBounds } from '../../utils/viewpoint-util';
 import { addReconnectHandles, removeReconnectHandles } from '../reconnect/model';
-import {
-    FeedbackEdgeEnd,
-    feedbackEdgeEndId,
-    FeedbackEdgeEndMovingMouseListener,
-    feedbackEdgeId
-} from './creation-tool-feedback';
+import { FeedbackEdgeEnd, feedbackEdgeEndId, FeedbackEdgeEndMovingMouseListener, feedbackEdgeId } from './creation-tool-feedback';
 import { FeedbackCommand } from './model';
 
 /**
@@ -59,11 +53,11 @@ import { FeedbackCommand } from './model';
  */
 
 export class ShowEdgeReconnectHandlesFeedbackAction implements Action {
-    constructor(readonly elementId?: string, public readonly kind: string = ShowEdgeReconnectHandlesFeedbackCommand.KIND) { }
+    constructor(readonly elementId?: string, public readonly kind: string = ShowEdgeReconnectHandlesFeedbackCommand.KIND) {}
 }
 
 export class HideEdgeReconnectHandlesFeedbackAction implements Action {
-    constructor(public readonly kind: string = HideEdgeReconnectHandlesFeedbackCommand.KIND) { }
+    constructor(public readonly kind: string = HideEdgeReconnectHandlesFeedbackCommand.KIND) {}
 }
 
 @injectable()
@@ -107,9 +101,11 @@ export class HideEdgeReconnectHandlesFeedbackCommand extends FeedbackCommand {
  */
 
 export class SwitchRoutingModeAction extends SwitchEditModeAction {
-    constructor(public readonly elementsToActivate: string[] = [],
+    constructor(
+        public readonly elementsToActivate: string[] = [],
         public readonly elementsToDeactivate: string[] = [],
-        public readonly kind: string = SwitchRoutingModeCommand.KIND) {
+        public readonly kind: string = SwitchRoutingModeCommand.KIND
+    ) {
         super(elementsToActivate, elementsToDeactivate);
     }
 }
@@ -127,7 +123,11 @@ export class SwitchRoutingModeCommand extends SwitchEditModeCommand {
  */
 
 export class DrawFeedbackEdgeSourceAction implements Action {
-    constructor(readonly elementTypeId: string, readonly targetId: string, public readonly kind: string = DrawFeedbackEdgeSourceCommand.KIND) { }
+    constructor(
+        readonly elementTypeId: string,
+        readonly targetId: string,
+        public readonly kind: string = DrawFeedbackEdgeSourceCommand.KIND
+    ) {}
 }
 
 @injectable()
@@ -168,12 +168,12 @@ export class FeedbackEdgeSourceMovingMouseListener extends MouseListener {
 
         const edge = edgeEnd.feedbackEdge;
         const position = getAbsolutePosition(edgeEnd, event);
-        const endAtMousePosition = findChildrenAtPosition(target.root, position)
-            .find(e => isConnectable(e) && e.canConnect(edge, 'source'));
+        const endAtMousePosition = findChildrenAtPosition(target.root, position).find(
+            e => isConnectable(e) && e.canConnect(edge, 'source')
+        );
 
         if (endAtMousePosition instanceof SConnectableElement && edge.target && isBoundsAware(edge.target)) {
-            const anchorComputer = this.anchorRegistry.get(PolylineEdgeRouter.KIND, endAtMousePosition.anchorKind);
-            const anchor = anchorComputer.getAnchor(endAtMousePosition, center(edge.target.bounds));
+            const anchor = this.computeAbsoluteAnchor(endAtMousePosition, center(edge.target.bounds));
             if (euclideanDistance(anchor, edgeEnd.position) > 1) {
                 return [new MoveAction([{ elementId: edgeEnd.id, toPosition: anchor }], false)];
             }
@@ -183,6 +183,21 @@ export class FeedbackEdgeSourceMovingMouseListener extends MouseListener {
 
         return [];
     }
+
+    protected computeAbsoluteAnchor(element: SConnectableElement, referencePoint: Point, offset?: number): Point {
+        const anchorComputer = this.anchorRegistry.get(PolylineEdgeRouter.KIND, element.anchorKind);
+        let anchor = anchorComputer.getAnchor(element, referencePoint, offset);
+        // The anchor is computed in the local coordinate system of the element.
+        // If the element is a nested child element we have to add the absolute position of its parent to the anchor.
+        if (element.parent !== element.root) {
+            const parent = findParentByFeature(element.parent, isBoundsAware);
+            if (parent) {
+                const absoluteParentPosition = toAbsoluteBounds(parent);
+                anchor = add(absoluteParentPosition, anchor);
+            }
+        }
+        return anchor;
+    }
 }
 
 export class FeedbackEdgeRouteMovingMouseListener extends MouseListener {
@@ -219,7 +234,8 @@ export class FeedbackEdgeRouteMovingMouseListener extends MouseListener {
             const dx = (event.pageX - this.lastDragPosition.x) / zoom;
             const dy = (event.pageY - this.lastDragPosition.y) / zoom;
             const handleMoves: ElementMove[] = [];
-            target.root.index.all()
+            target.root.index
+                .all()
                 .filter(element => isSelected(element))
                 .forEach(element => {
                     if (isRoutingHandle(element)) {

package/src/features/tool-feedback/feedback-action-dispatcher.ts

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2019 EclipseSource and others.
+ * Copyright (c) 2019-2021 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,10 +13,11 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
+import { Action } from '@eclipse-glsp/protocol';
 import { inject, injectable } from 'inversify';
-import { Action, IActionDispatcher, ILogger, TYPES } from 'sprotty';
+import { IActionDispatcher, ILogger, TYPES } from 'sprotty';
 
-export interface IFeedbackEmitter { }
+export interface IFeedbackEmitter {}
 
 /**
  * Dispatcher for actions that are meant to show visual feedback on
@@ -52,14 +53,14 @@ export interface IFeedbackActionDispatcher {
     deregisterFeedback(feedbackEmitter: IFeedbackEmitter, actions: Action[]): void;
 
     /**
-    * Retrieve all `actions` sent out by currently registered `feedbackEmitter`.
-    */
+     * Retrieve all `actions` sent out by currently registered `feedbackEmitter`.
+     */
     getRegisteredFeedback(): Action[];
 }
 
 @injectable()
 export class FeedbackActionDispatcher implements IFeedbackActionDispatcher {
-    protected feedbackEmitters: Map<IFeedbackEmitter, Action[]> = new Map;
+    protected feedbackEmitters: Map<IFeedbackEmitter, Action[]> = new Map();
 
     @inject(TYPES.IActionDispatcherProvider) protected actionDispatcher: () => Promise<IActionDispatcher>;
     @inject(TYPES.ILogger) protected logger: ILogger;
@@ -93,9 +94,7 @@ export class FeedbackActionDispatcher implements IFeedbackActionDispatcher {
             if (value.find(a => a === action)) {
                 result.push(key);
             }
-        }
-        );
+        });
         return result;
     }
-
 }

package/src/features/tool-feedback/marquee-tool-feedback.ts

@@ -13,27 +13,26 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
+import { Action, Point } from '@eclipse-glsp/protocol';
 import { inject, injectable } from 'inversify';
 import {
-    Action,
     AnchorComputerRegistry,
     CommandExecutionContext,
     CommandReturn,
     MouseListener,
-    Point,
     SChildElement,
     SModelElement,
     SModelRoot,
     TYPES
 } from 'sprotty';
-
 import { FeedbackCommand } from './model';
 
 export class DrawMarqueeAction implements Action {
     constructor(
         public readonly startPoint: Point,
         public readonly endPoint: Point,
-        public readonly kind: string = DrawMarqueeCommand.KIND) { }
+        public readonly kind: string = DrawMarqueeCommand.KIND
+    ) {}
 }
 
 @injectable()
@@ -51,7 +50,7 @@ export class DrawMarqueeCommand extends FeedbackCommand {
 }
 
 export class RemoveMarqueeAction implements Action {
-    constructor(public readonly kind: string = RemoveMarqueeCommand.KIND) { }
+    constructor(public readonly kind: string = RemoveMarqueeCommand.KIND) {}
 }
 
 @injectable()

package/src/features/tool-feedback/model.ts

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2019 EclipseSource and others.
+ * Copyright (c) 2019-2021 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
@@ -29,4 +29,3 @@ export abstract class FeedbackCommand extends Command {
         return context.root;
     }
 }
-

package/src/features/tool-feedback/view.tsx

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2019 EclipseSource and others.
+ * Copyright (c) 2019-2021 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,20 +13,19 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
+import { Point } from '@eclipse-glsp/protocol';
 import { injectable } from 'inversify';
-import * as snabbdom from 'snabbdom-jsx';
-import { VNode } from 'snabbdom/vnode';
-import { IView, ORIGIN_POINT, Point, RenderingContext, setAttr, SModelElement } from 'sprotty';
-
+import { VNode } from 'snabbdom';
+import { IView, ORIGIN_POINT, RenderingContext, setAttr, SModelElement, svg } from 'sprotty';
 import { isResizable, ResizeHandleLocation, SResizeHandle } from '../change-bounds/model';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-const JSX = { createElement: snabbdom.svg };
+const JSX = { createElement: svg };
 
 /**
-* This view is used for the invisible end of the feedback edge.
-* A feedback edge is shown as a visual feedback when creating edges.
-*/
+ * This view is used for the invisible end of the feedback edge.
+ * A feedback edge is shown as a visual feedback when creating edges.
+ */
 @injectable()
 export class FeedbackEdgeEndView implements IView {
     render(model: Readonly<SModelElement>, context: RenderingContext): VNode {
@@ -40,8 +39,15 @@ export class SResizeHandleView implements IView {
     render(handle: SResizeHandle, context: RenderingContext): VNode {
         const position = this.getPosition(handle);
         if (position !== undefined) {
-            const node = <circle class-sprotty-resize-handle={true} class-mouseover={handle.hoverFeedback}
-                cx={position.x} cy={position.y} r={this.getRadius()} />;
+            const node = (
+                <circle
+                    class-sprotty-resize-handle={true}
+                    class-mouseover={handle.hoverFeedback}
+                    cx={position.x}
+                    cy={position.y}
+                    r={this.getRadius()}
+                />
+            );
             setAttr(node, 'data-kind', handle.location);
             return node;
         }

package/src/features/tool-palette/di.config.ts

@@ -13,14 +13,12 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-import '../../../css/tool-palette.css';
-
 import { ContainerModule } from 'inversify';
 import { configureActionHandler, EnableDefaultToolsAction, TYPES } from 'sprotty';
-
+import '../../../css/tool-palette.css';
 import { EnableToolPaletteAction, ToolPalette } from './tool-palette';
 
-const toolPaletteModule = new ContainerModule((bind, _unbind, isBound) => {
+const toolPaletteModule = new ContainerModule((bind, _unbind, isBound, rebind) => {
     bind(ToolPalette).toSelf().inSingletonScope();
     bind(TYPES.IUIExtension).toService(ToolPalette);
     configureActionHandler({ bind, isBound }, EnableToolPaletteAction.KIND, ToolPalette);

package/src/features/tool-palette/palette-item.ts

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2020 EclipseSource and others.
+ * Copyright (c) 2020-2021 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,9 +13,7 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-import { isLabeledAction, LabeledAction } from 'sprotty';
-
-import { isTriggerElementTypeCreationAction, TriggerElementCreationAction } from '../../base/operations/operation';
+import { isLabeledAction, isTriggerElementTypeCreationAction, LabeledAction, TriggerElementCreationAction } from '@eclipse-glsp/protocol';
 
 export interface PaletteItem extends LabeledAction {
     readonly id: string;
@@ -30,11 +28,11 @@ export function isPaletteItem(object?: any): object is PaletteItem {
 export namespace PaletteItem {
     export function getTriggerAction(item?: PaletteItem): TriggerElementCreationAction | undefined {
         if (item) {
-            const initiAction = item.actions.filter(a => isTriggerElementTypeCreationAction(a))
+            const initiAction = item.actions
+                .filter(a => isTriggerElementTypeCreationAction(a))
                 .map(action => action as TriggerElementCreationAction);
             return initiAction.length > 0 ? initiAction[0] : undefined;
         }
         return undefined;
     }
 }
-

package/src/features/tool-palette/tool-palette.ts

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2019 EclipseSource and others.
+ * Copyright (c) 2019-2021 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,6 +13,7 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
+import { isSetContextActionsAction, RequestContextActions, RequestMarkersAction, SetContextActions } from '@eclipse-glsp/protocol';
 import { inject, injectable, postConstruct } from 'inversify';
 import {
     AbstractUIExtension,
@@ -26,20 +27,18 @@ import {
     SModelRoot,
     TYPES
 } from 'sprotty';
+import { codiconCSSClasses } from 'sprotty/lib/utils/codicon';
 import { matchesKeystroke } from 'sprotty/lib/utils/keyboard';
-
 import { GLSPActionDispatcher } from '../../base/action-dispatcher';
-import { isSetContextActionsAction, RequestContextActions, SetContextActions } from '../../base/actions/context-actions';
-import { EditModeListener, EditorContextService } from '../../base/editor-context';
+import { EditModeListener, EditorContextService } from '../../base/editor-context-service';
 import { MouseDeleteTool } from '../tools/delete-tool';
 import { MarqueeMouseTool } from '../tools/marquee-mouse-tool';
-import { RequestMarkersAction } from '../validation/validate';
 import { PaletteItem } from './palette-item';
 
 const CLICKED_CSS_CLASS = 'clicked';
-const SEARCH_ICON = 'fa-search';
-const PALETTE_ICON = 'fa-palette';
-const CHEVRON_DOWN = 'fa-chevron-down';
+const SEARCH_ICON_ID = 'search';
+const PALETTE_ICON_ID = 'symbol-color';
+const CHEVRON_DOWN_ICON_ID = 'chevron-right';
 const PALETTE_HEIGHT = '500px';
 
 @injectable()
@@ -101,7 +100,7 @@ export class ToolPalette extends AbstractUIExtension implements IActionHandler,
         this.containerElement.classList.add('collapsible-palette');
         if (baseDiv) {
             const insertedDiv = baseDiv.insertBefore(minPaletteDiv, baseDiv.firstChild);
-            const minimizeIcon = createIcon(['fas', CHEVRON_DOWN]);
+            const minimizeIcon = createIcon(CHEVRON_DOWN_ICON_ID);
             this.updateMinimizePaletteButtonTooltip(minPaletteDiv);
             minimizeIcon.onclick = _event => {
                 if (this.isPaletteMaximized()) {
@@ -110,10 +109,8 @@ export class ToolPalette extends AbstractUIExtension implements IActionHandler,
                     this.containerElement.style.maxHeight = PALETTE_HEIGHT;
                 }
                 this.updateMinimizePaletteButtonTooltip(minPaletteDiv);
-                changeCSSClass(minimizeIcon, PALETTE_ICON);
-                changeCSSClass(minimizeIcon, 'fa');
-                changeCSSClass(minimizeIcon, 'fas');
-                changeCSSClass(minimizeIcon, CHEVRON_DOWN);
+                changeCodiconClass(minimizeIcon, PALETTE_ICON_ID);
+                changeCodiconClass(minimizeIcon, CHEVRON_DOWN_ICON_ID);
             };
             insertedDiv.appendChild(minimizeIcon);
         }
@@ -135,16 +132,15 @@ export class ToolPalette extends AbstractUIExtension implements IActionHandler,
         const bodyDiv = document.createElement('div');
         bodyDiv.classList.add('palette-body');
         let tabIndex = 0;
-        this.paletteItems.sort(compare)
-            .forEach(item => {
-                if (item.children) {
-                    const group = createToolGroup(item);
-                    item.children.sort(compare).forEach(child => group.appendChild(this.createToolButton(child, tabIndex++)));
-                    bodyDiv.appendChild(group);
-                } else {
-                    bodyDiv.appendChild(this.createToolButton(item, tabIndex++));
-                }
-            });
+        this.paletteItems.sort(compare).forEach(item => {
+            if (item.children) {
+                const group = createToolGroup(item);
+                item.children.sort(compare).forEach(child => group.appendChild(this.createToolButton(child, tabIndex++)));
+                bodyDiv.appendChild(group);
+            } else {
+                bodyDiv.appendChild(this.createToolButton(item, tabIndex++));
+            }
+        });
         if (this.paletteItems.length === 0) {
             const noResultsDiv = document.createElement('div');
             noResultsDiv.innerText = 'No results found.';
@@ -165,7 +161,7 @@ export class ToolPalette extends AbstractUIExtension implements IActionHandler,
         headerCompartment.classList.add('palette-header');
         headerCompartment.append(this.createHeaderTitle());
         headerCompartment.appendChild(this.createHeaderTools());
-        headerCompartment.appendChild(this.searchField = this.createHeaderSearchField());
+        headerCompartment.appendChild((this.searchField = this.createHeaderSearchField()));
         this.containerElement.appendChild(headerCompartment);
     }
 
@@ -193,7 +189,7 @@ export class ToolPalette extends AbstractUIExtension implements IActionHandler,
     }
 
     protected createDefaultToolButton(): HTMLElement {
-        const button = createIcon(['fas', 'fa-mouse-pointer', 'fa-xs', 'clicked']);
+        const button = createIcon('inspect');
         button.id = 'btn_default_tools';
         button.title = 'Enable selection tool';
         button.onclick = this.onClickStaticToolButton(this.defaultToolsButton);
@@ -201,21 +197,21 @@ export class ToolPalette extends AbstractUIExtension implements IActionHandler,
     }
 
     protected createMouseDeleteToolButton(): HTMLElement {
-        const deleteToolButton = createIcon(['fas', 'fa-eraser', 'fa-xs']);
+        const deleteToolButton = createIcon('chrome-close');
         deleteToolButton.title = 'Enable deletion tool';
         deleteToolButton.onclick = this.onClickStaticToolButton(deleteToolButton, MouseDeleteTool.ID);
         return deleteToolButton;
     }
 
     protected createMarqueeToolButton(): HTMLElement {
-        const marqueeToolButton = createIcon(['far', 'fa-object-group', 'fa-xs']);
+        const marqueeToolButton = createIcon('screen-full');
         marqueeToolButton.title = 'Enable marquee tool';
         marqueeToolButton.onclick = this.onClickStaticToolButton(marqueeToolButton, MarqueeMouseTool.ID);
         return marqueeToolButton;
     }
 
     protected createValidateButton(): HTMLElement {
-        const validateActionButton = createIcon(['fas', 'fa-check-square', 'fa-xs']);
+        const validateActionButton = createIcon('pass');
         validateActionButton.title = 'Validate model';
         validateActionButton.onclick = _event => {
             const modelIds: string[] = [this.modelRootId];
@@ -225,15 +221,15 @@ export class ToolPalette extends AbstractUIExtension implements IActionHandler,
     }
 
     protected createSearchButton(): HTMLElement {
-        const searchIcon = createIcon(['fas', SEARCH_ICON, 'state-icon', 'fa-xs']);
+        const searchIcon = createIcon(SEARCH_ICON_ID);
         searchIcon.onclick = _ev => {
             const searchField = document.getElementById(this.containerElement.id + '_search_field');
             if (searchField) {
-                if (searchField.style.display === 'inline') {
-                    searchField.style.display = 'none';
-                } else {
-                    searchField.style.display = 'inline';
+                if (searchField.style.display === 'none') {
+                    searchField.style.display = '';
                     searchField.focus();
+                } else {
+                    searchField.style.display = 'none';
                 }
             }
         };
@@ -257,7 +253,7 @@ export class ToolPalette extends AbstractUIExtension implements IActionHandler,
     protected createHeaderTitle(): HTMLElement {
         const header = document.createElement('div');
         header.classList.add('header-icon');
-        header.appendChild(createIcon(['fa', 'fa-palette']));
+        header.appendChild(createIcon(PALETTE_ICON_ID));
         header.insertAdjacentText('beforeend', 'Palette');
         return header;
     }
@@ -266,7 +262,10 @@ export class ToolPalette extends AbstractUIExtension implements IActionHandler,
         const button = document.createElement('div');
         button.tabIndex = index;
         button.classList.add('tool-button');
-        button.innerHTML = item.label;
+        if (item.icon) {
+            button.appendChild(createIcon(item.icon));
+        }
+        button.insertAdjacentText('beforeend', item.label);
         button.onclick = this.onClickCreateToolButton(button, item);
         button.onkeydown = ev => this.clearToolOnEscape(ev);
         return button;
@@ -383,9 +382,9 @@ export function compare(a: PaletteItem, b: PaletteItem): number {
     return a.label.localeCompare(b.label);
 }
 
-export function createIcon(cssClasses: string[]): HTMLElement {
+export function createIcon(codiconId: string): HTMLElement {
     const icon = document.createElement('i');
-    icon.classList.add(...cssClasses);
+    icon.classList.add(...codiconCSSClasses(codiconId));
     return icon;
 }
 
@@ -396,7 +395,7 @@ export function createToolGroup(item: PaletteItem): HTMLElement {
     const header = document.createElement('div');
     header.classList.add('group-header');
     if (item.icon) {
-        header.appendChild(createIcon(['fas', item.icon]));
+        header.appendChild(createIcon(item.icon));
     }
     header.insertAdjacentText('beforeend', item.label);
     header.ondblclick = _ev => {
@@ -411,6 +410,11 @@ export function createToolGroup(item: PaletteItem): HTMLElement {
 }
 
 export function changeCSSClass(element: Element, css: string): void {
-    element.classList.contains(css) ? element.classList.remove(css) :
-        element.classList.add(css);
+    element.classList.contains(css) ? element.classList.remove(css) : element.classList.add(css);
+}
+
+export function changeCodiconClass(element: Element, codiconId: string): void {
+    element.classList.contains(codiconCSSClasses(codiconId)[1])
+        ? element.classList.remove(codiconCSSClasses(codiconId)[1])
+        : element.classList.add(codiconCSSClasses(codiconId)[1]);
 }

package/src/features/tools/base-glsp-tool.ts

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2020 EclipseSource and others.
+ * Copyright (c) 2020-2021 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,10 +13,10 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
+import { Action } from '@eclipse-glsp/protocol';
 import { inject, injectable } from 'inversify';
-import { Action, IActionDispatcher, KeyTool, TYPES } from 'sprotty';
-
-import { EditorContextService } from '../../base/editor-context';
+import { IActionDispatcher, KeyTool, TYPES } from 'sprotty';
+import { EditorContextService } from '../../base/editor-context-service';
 import { GLSPTool } from '../../base/tool-manager/glsp-tool-manager';
 import { GLSP_TYPES } from '../../base/types';
 import { IMouseTool } from '../mouse-tool/mouse-tool';