@eclipse-glsp/client 0.9.0-rc-01 → 0.10.0-next.146a812.165

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-2022 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()
@@ -76,7 +75,7 @@ export class ToolPalette extends AbstractUIExtension implements IActionHandler,
         this.editorContext.register(this);
     }
 
-    initialize(): boolean {
+    override initialize(): boolean {
         if (!this.paletteItems) {
             return false;
         }
@@ -89,7 +88,7 @@ export class ToolPalette extends AbstractUIExtension implements IActionHandler,
         this.lastActivebutton = this.defaultToolsButton;
     }
 
-    protected onBeforeShow(_containerElement: HTMLElement, root: Readonly<SModelRoot>): void {
+    protected override onBeforeShow(_containerElement: HTMLElement, root: Readonly<SModelRoot>): void {
         this.modelRootId = root.id;
         this.containerElement.style.maxHeight = PALETTE_HEIGHT;
     }
@@ -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,13 @@ 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);
+    // eslint-disable-next-line chai-friendly/no-unused-expressions
+    element.classList.contains(css) ? element.classList.remove(css) : element.classList.add(css);
+}
+
+export function changeCodiconClass(element: Element, codiconId: string): void {
+    // eslint-disable-next-line chai-friendly/no-unused-expressions
+    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-2022 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';
@@ -39,15 +39,15 @@ export abstract class BaseGLSPTool implements GLSPTool {
         return true;
     }
 
-    dispatchFeedback(actions: Action[], feedbackeEmitter?: IFeedbackEmitter): void {
-        this.feedbackDispatcher.registerFeedback(feedbackeEmitter ? feedbackeEmitter : this, actions);
-    }
-
     dispatchActions(actions: Action[]): void {
         this.actionDispatcher.dispatchAll(actions);
     }
 
-    deregisterFeedback(actions: Action[], feedbackeEmitter?: IFeedbackEmitter): void {
-        this.feedbackDispatcher.deregisterFeedback(feedbackeEmitter ? feedbackeEmitter : this, actions);
+    dispatchFeedback(actions: Action[], feedbackEmitter?: IFeedbackEmitter): void {
+        this.feedbackDispatcher.registerFeedback(feedbackEmitter ?? this, actions);
+    }
+
+    deregisterFeedback(actions: Action[], feedbackEmitter?: IFeedbackEmitter): void {
+        this.feedbackDispatcher.deregisterFeedback(feedbackEmitter ?? this, actions);
     }
 }