@eclipse-glsp/client 0.9.0-next.d9bed812 → 0.9.0-next.eb280175

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,7 +13,8 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-import { inject, injectable, postConstruct } from "inversify";
+import { isSetContextActionsAction, RequestContextActions, RequestMarkersAction, SetContextActions } from '@eclipse-glsp/protocol';
+import { inject, injectable, postConstruct } from 'inversify';
 import {
     AbstractUIExtension,
     Action,
@@ -25,32 +26,30 @@ import {
     SetUIExtensionVisibilityAction,
     SModelRoot,
     TYPES
-} from "sprotty";
-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 { MarqueeMouseTool } from "../tools/marquee-mouse-tool";
-import { MouseDeleteTool } from "../tools/delete-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 PALETTE_HEIGHT = "500px";
+} from 'sprotty';
+import { codiconCSSClasses } from 'sprotty/lib/utils/codicon';
+import { matchesKeystroke } from 'sprotty/lib/utils/keyboard';
+import { GLSPActionDispatcher } from '../../base/action-dispatcher';
+import { EditModeListener, EditorContextService } from '../../base/editor-context-service';
+import { MouseDeleteTool } from '../tools/delete-tool';
+import { MarqueeMouseTool } from '../tools/marquee-mouse-tool';
+import { PaletteItem } from './palette-item';
+
+const CLICKED_CSS_CLASS = 'clicked';
+const SEARCH_ICON_ID = 'search';
+const PALETTE_ICON_ID = 'symbol-color';
+const CHEVRON_DOWN_ICON_ID = 'chevron-right';
+const PALETTE_HEIGHT = '500px';
 
 @injectable()
 export class EnableToolPaletteAction implements Action {
-    static readonly KIND = "enableToolPalette";
+    static readonly KIND = 'enableToolPalette';
     readonly kind = EnableToolPaletteAction.KIND;
 }
 
 @injectable()
 export class ToolPalette extends AbstractUIExtension implements IActionHandler, EditModeListener {
-    static readonly ID = "tool-palette";
+    static readonly ID = 'tool-palette';
 
     @inject(TYPES.IActionDispatcher) protected readonly actionDispatcher: GLSPActionDispatcher;
     @inject(TYPES.IToolManager) protected readonly toolManager: IToolManager;
@@ -64,8 +63,12 @@ export class ToolPalette extends AbstractUIExtension implements IActionHandler,
     protected searchField: HTMLInputElement;
     modelRootId: string;
 
-    id() { return ToolPalette.ID; }
-    containerClass() { return ToolPalette.ID; }
+    id(): string {
+        return ToolPalette.ID;
+    }
+    containerClass(): string {
+        return ToolPalette.ID;
+    }
 
     @postConstruct()
     postConstruct(): void {
@@ -85,37 +88,35 @@ export class ToolPalette extends AbstractUIExtension implements IActionHandler,
         this.lastActivebutton = this.defaultToolsButton;
     }
 
-    protected onBeforeShow(_containerElement: HTMLElement, root: Readonly<SModelRoot>) {
+    protected onBeforeShow(_containerElement: HTMLElement, root: Readonly<SModelRoot>): void {
         this.modelRootId = root.id;
         this.containerElement.style.maxHeight = PALETTE_HEIGHT;
     }
 
     protected addMinimizePaletteButton(): void {
         const baseDiv = document.getElementById(this.options.baseDiv);
-        const minPaletteDiv = document.createElement("div");
-        minPaletteDiv.classList.add("minimize-palette-button");
-        this.containerElement.classList.add("collapsible-palette");
+        const minPaletteDiv = document.createElement('div');
+        minPaletteDiv.classList.add('minimize-palette-button');
+        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()) {
-                    this.containerElement.style.maxHeight = "0px";
+                    this.containerElement.style.maxHeight = '0px';
                 } else {
                     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);
         }
     }
 
-    protected updateMinimizePaletteButtonTooltip(button: HTMLDivElement) {
+    protected updateMinimizePaletteButtonTooltip(button: HTMLDivElement): void {
         if (this.isPaletteMaximized()) {
             button.title = 'Minimize palette';
         } else {
@@ -123,28 +124,27 @@ export class ToolPalette extends AbstractUIExtension implements IActionHandler,
         }
     }
 
-    protected isPaletteMaximized() {
-        return this.containerElement && this.containerElement.style.maxHeight !== "0px";
+    protected isPaletteMaximized(): boolean {
+        return this.containerElement && this.containerElement.style.maxHeight !== '0px';
     }
 
     protected createBody(): void {
-        const bodyDiv = document.createElement("div");
-        bodyDiv.classList.add("palette-body");
+        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.";
-            noResultsDiv.classList.add("tool-button");
+            const noResultsDiv = document.createElement('div');
+            noResultsDiv.innerText = 'No results found.';
+            noResultsDiv.classList.add('tool-button');
             bodyDiv.appendChild(noResultsDiv);
         }
         // Remove existing body to refresh filtered entries
@@ -157,17 +157,17 @@ export class ToolPalette extends AbstractUIExtension implements IActionHandler,
 
     protected createHeader(): void {
         this.addMinimizePaletteButton();
-        const headerCompartment = document.createElement("div");
-        headerCompartment.classList.add("palette-header");
+        const headerCompartment = document.createElement('div');
+        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);
     }
 
     private createHeaderTools(): HTMLElement {
-        const headerTools = document.createElement("div");
-        headerTools.classList.add("header-tools");
+        const headerTools = document.createElement('div');
+        headerTools.classList.add('header-tools');
 
         this.defaultToolsButton = this.createDefaultToolButton();
         headerTools.appendChild(this.defaultToolsButton);
@@ -188,30 +188,30 @@ export class ToolPalette extends AbstractUIExtension implements IActionHandler,
         return headerTools;
     }
 
-    protected createDefaultToolButton() {
-        const button = createIcon(["fas", "fa-mouse-pointer", "fa-xs", "clicked"]);
-        button.id = "btn_default_tools";
+    protected createDefaultToolButton(): HTMLElement {
+        const button = createIcon('inspect');
+        button.id = 'btn_default_tools';
         button.title = 'Enable selection tool';
         button.onclick = this.onClickStaticToolButton(this.defaultToolsButton);
         return button;
     }
 
-    protected createMouseDeleteToolButton() {
-        const deleteToolButton = createIcon(["fas", "fa-eraser", "fa-xs"]);
+    protected createMouseDeleteToolButton(): HTMLElement {
+        const deleteToolButton = createIcon('chrome-close');
         deleteToolButton.title = 'Enable deletion tool';
         deleteToolButton.onclick = this.onClickStaticToolButton(deleteToolButton, MouseDeleteTool.ID);
         return deleteToolButton;
     }
 
-    protected createMarqueeToolButton() {
-        const marqueeToolButton = createIcon(["far", "fa-object-group", "fa-xs"]);
+    protected createMarqueeToolButton(): HTMLElement {
+        const marqueeToolButton = createIcon('screen-full');
         marqueeToolButton.title = 'Enable marquee tool';
         marqueeToolButton.onclick = this.onClickStaticToolButton(marqueeToolButton, MarqueeMouseTool.ID);
         return marqueeToolButton;
     }
 
-    protected createValidateButton() {
-        const validateActionButton = createIcon(["fas", "fa-check-square", "fa-xs"]);
+    protected createValidateButton(): HTMLElement {
+        const validateActionButton = createIcon('pass');
         validateActionButton.title = 'Validate model';
         validateActionButton.onclick = _event => {
             const modelIds: string[] = [this.modelRootId];
@@ -220,51 +220,54 @@ export class ToolPalette extends AbstractUIExtension implements IActionHandler,
         return validateActionButton;
     }
 
-    protected createSearchButton() {
-        const searchIcon = createIcon(["fas", SEARCH_ICON, "state-icon", "fa-xs"]);
-        searchIcon.onclick = (_ev) => {
-            const searchField = document.getElementById(this.containerElement.id + "_search_field");
+    protected createSearchButton(): HTMLElement {
+        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';
                 }
             }
         };
-        searchIcon.classList.add("search-icon");
+        searchIcon.classList.add('search-icon');
         searchIcon.title = 'Filter palette entries';
         return searchIcon;
     }
 
     protected createHeaderSearchField(): HTMLInputElement {
-        const searchField = document.createElement("input");
-        searchField.classList.add("search-input");
-        searchField.id = this.containerElement.id + "_search_field";
-        searchField.type = "text";
-        searchField.placeholder = " Search...";
-        searchField.style.display = "none";
+        const searchField = document.createElement('input');
+        searchField.classList.add('search-input');
+        searchField.id = this.containerElement.id + '_search_field';
+        searchField.type = 'text';
+        searchField.placeholder = ' Search...';
+        searchField.style.display = 'none';
         searchField.onkeyup = () => this.requestFilterUpdate(this.searchField.value);
-        searchField.onkeydown = (ev) => this.clearOnEscape(ev);
+        searchField.onkeydown = ev => this.clearOnEscape(ev);
         return searchField;
     }
 
     protected createHeaderTitle(): HTMLElement {
-        const header = document.createElement("div");
-        header.classList.add("header-icon");
-        header.appendChild(createIcon(["fa", "fa-palette"]));
-        header.insertAdjacentText("beforeend", "Palette");
+        const header = document.createElement('div');
+        header.classList.add('header-icon');
+        header.appendChild(createIcon(PALETTE_ICON_ID));
+        header.insertAdjacentText('beforeend', 'Palette');
         return header;
     }
 
     protected createToolButton(item: PaletteItem, index: number): HTMLElement {
-        const button = document.createElement("div");
+        const button = document.createElement('div');
         button.tabIndex = index;
-        button.classList.add("tool-button");
-        button.innerHTML = item.label;
+        button.classList.add('tool-button');
+        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);
+        button.onkeydown = ev => this.clearToolOnEscape(ev);
         return button;
     }
 
@@ -289,7 +292,7 @@ export class ToolPalette extends AbstractUIExtension implements IActionHandler,
         };
     }
 
-    changeActiveButton(button?: HTMLElement) {
+    changeActiveButton(button?: HTMLElement): void {
         if (this.lastActivebutton) {
             this.lastActivebutton.classList.remove(CLICKED_CSS_CLASS);
         }
@@ -319,24 +322,24 @@ export class ToolPalette extends AbstractUIExtension implements IActionHandler,
         }
     }
 
-    editModeChanged(_oldValue: string, _newValue: string) {
+    editModeChanged(_oldValue: string, _newValue: string): void {
         this.actionDispatcher.dispatch(new SetUIExtensionVisibilityAction(ToolPalette.ID, !this.editorContext.isReadonly));
     }
 
-    protected clearOnEscape(event: KeyboardEvent) {
-        if (matchesKeystroke(event, "Escape")) {
-            this.searchField.value = "";
-            this.requestFilterUpdate("");
+    protected clearOnEscape(event: KeyboardEvent): void {
+        if (matchesKeystroke(event, 'Escape')) {
+            this.searchField.value = '';
+            this.requestFilterUpdate('');
         }
     }
 
-    protected clearToolOnEscape(event: KeyboardEvent) {
-        if (matchesKeystroke(event, "Escape")) {
+    protected clearToolOnEscape(event: KeyboardEvent): void {
+        if (matchesKeystroke(event, 'Escape')) {
             this.actionDispatcher.dispatch(new EnableDefaultToolsAction());
         }
     }
 
-    protected handleSetContextActions(action: SetContextActions) {
+    protected handleSetContextActions(action: SetContextActions): void {
         this.paletteItems = action.actions.map(e => e as PaletteItem);
         this.createBody();
     }
@@ -379,24 +382,24 @@ export function compare(a: PaletteItem, b: PaletteItem): number {
     return a.label.localeCompare(b.label);
 }
 
-export function createIcon(cssClasses: string[]) {
-    const icon = document.createElement("i");
-    icon.classList.add(...cssClasses);
+export function createIcon(codiconId: string): HTMLElement {
+    const icon = document.createElement('i');
+    icon.classList.add(...codiconCSSClasses(codiconId));
     return icon;
 }
 
 export function createToolGroup(item: PaletteItem): HTMLElement {
-    const group = document.createElement("div");
-    group.classList.add("tool-group");
+    const group = document.createElement('div');
+    group.classList.add('tool-group');
     group.id = item.id;
-    const header = document.createElement("div");
-    header.classList.add("group-header");
+    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) => {
-        const css = "collapsed";
+    header.ondblclick = _ev => {
+        const css = 'collapsed';
         changeCSSClass(group, css);
         Array.from(group.children).forEach(child => changeCSSClass(child, css));
         window!.getSelection()!.removeAllRanges();
@@ -406,7 +409,12 @@ export function createToolGroup(item: PaletteItem): HTMLElement {
     return group;
 }
 
-export function changeCSSClass(element: Element, css: string) {
-    element.classList.contains(css) ? element.classList.remove(css) :
-        element.classList.add(css);
+export function changeCSSClass(element: Element, css: string): void {
+    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,14 +13,14 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-import { inject, injectable } from "inversify";
-import { Action, IActionDispatcher, KeyTool, TYPES } from "sprotty";
-
-import { EditorContextService } from "../../base/editor-context";
-import { GLSPTool } from "../../base/tool-manager/glsp-tool-manager";
-import { GLSP_TYPES } from "../../base/types";
-import { IMouseTool } from "../mouse-tool/mouse-tool";
-import { IFeedbackActionDispatcher, IFeedbackEmitter } from "../tool-feedback/feedback-action-dispatcher";
+import { Action } from '@eclipse-glsp/protocol';
+import { inject, injectable } from 'inversify';
+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';
+import { IFeedbackActionDispatcher, IFeedbackEmitter } from '../tool-feedback/feedback-action-dispatcher';
 
 @injectable()
 export abstract class BaseGLSPTool implements GLSPTool {
@@ -39,15 +39,15 @@ export abstract class BaseGLSPTool implements GLSPTool {
         return true;
     }
 
-    dispatchFeedback(actions: Action[], feedbackeEmitter?: IFeedbackEmitter) {
+    dispatchFeedback(actions: Action[], feedbackeEmitter?: IFeedbackEmitter): void {
         this.feedbackDispatcher.registerFeedback(feedbackeEmitter ? feedbackeEmitter : this, actions);
     }
 
-    dispatchActions(actions: Action[]) {
+    dispatchActions(actions: Action[]): void {
         this.actionDispatcher.dispatchAll(actions);
     }
 
-    deregisterFeedback(actions: Action[], feedbackeEmitter?: IFeedbackEmitter) {
+    deregisterFeedback(actions: Action[], feedbackeEmitter?: IFeedbackEmitter): void {
         this.feedbackDispatcher.deregisterFeedback(feedbackeEmitter ? feedbackeEmitter : this, actions);
     }
 }