@eclipse-glsp/client 0.10.0-next.e5fcffe.169 → 1.1.0-next.fe0b297.182

package/src/features/change-bounds/snap.ts

@@ -13,25 +13,28 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-import { Point } from '@eclipse-glsp/protocol';
+import { Point, Writable } from '@eclipse-glsp/protocol';
 import { injectable } from 'inversify';
 import { findParentByFeature, ISnapper, isViewport, SModelElement } from 'sprotty';
-import { WriteablePoint } from '../../utils/layout-utils';
 
+/**
+ * A {@link ISnapper} implementation that snaps all elements onto a fixed gride size.
+ * The default grid size is 10x10 pixel.
+ * To configure a custom grid size  bind the `TYPES.ISnapper` service identifier
+ * to constant value, e.g:
+ *
+ * ```ts
+ * bind(TYPES.ISnapper).toConstantValue(new GridSnapper({x:25 ,y:25 }));
+ * ```
+ */
 @injectable()
 export class GridSnapper implements ISnapper {
-    get gridX(): number {
-        return 10;
-    }
-
-    get gridY(): number {
-        return 10;
-    }
+    constructor(public grid: { x: number; y: number } = { x: 10, y: 10 }) {}
 
     snap(position: Point, element: SModelElement): Point {
         return {
-            x: Math.round(position.x / this.gridX) * this.gridX,
-            y: Math.round(position.y / this.gridY) * this.gridY
+            x: Math.round(position.x / this.grid.x) * this.grid.x,
+            y: Math.round(position.y / this.grid.y) * this.grid.y
         };
     }
 }
@@ -46,7 +49,7 @@ export class GridSnapper implements ISnapper {
  */
 export class PointPositionUpdater {
     protected lastDragPosition?: Point;
-    protected positionDelta: WriteablePoint = { x: 0, y: 0 };
+    protected positionDelta: Writable<Point> = { x: 0, y: 0 };
 
     constructor(protected snapper?: ISnapper) {}
 

package/src/features/context-menu/selection-service-aware-context-menu-mouse-listener.ts

@@ -15,53 +15,47 @@
  ********************************************************************************/
 import { Action } from '@eclipse-glsp/protocol';
 import { inject, injectable, optional } from 'inversify';
-import {
-    ContextMenuProviderRegistry,
-    findParentByFeature,
-    IContextMenuServiceProvider,
-    isSelectable,
-    MouseListener,
-    SModelElement
-} from 'sprotty';
+import { ContextMenuProviderRegistry, IContextMenuServiceProvider, MouseListener, SModelElement } from 'sprotty';
 import { FocusStateChangedAction } from '../../base/actions/focus-change-action';
 import { TYPES } from '../../base/types';
 import { SelectionService } from '../select/selection-service';
 
 @injectable()
 export class SelectionServiceAwareContextMenuMouseListener extends MouseListener {
-    @inject(TYPES.IContextMenuServiceProvider) @optional() protected readonly contextMenuService: IContextMenuServiceProvider;
-    @inject(TYPES.IContextMenuProviderRegistry) @optional() protected readonly menuProvider: ContextMenuProviderRegistry;
-    @inject(TYPES.SelectionService) protected selectionService: SelectionService;
+    @inject(TYPES.IContextMenuServiceProvider)
+    @optional()
+    protected readonly contextMenuService?: IContextMenuServiceProvider;
+
+    @inject(TYPES.IContextMenuProviderRegistry)
+    @optional()
+    protected readonly menuProvider?: ContextMenuProviderRegistry;
+
+    @inject(TYPES.SelectionService)
+    protected selectionService: SelectionService;
 
     /**
-     * Opens the context menu on right-click.
+     * Opens the context menu.
      */
-    override mouseDown(target: SModelElement, event: MouseEvent): (Action | Promise<Action>)[] {
-        if (event.button === 2 && this.contextMenuService && this.menuProvider) {
-            return this.openContextMenu(event, target);
-        }
-        return [];
+    override contextMenu(target: SModelElement, event: MouseEvent): (Action | Promise<Action>)[] {
+        return this.openContextMenu(target, event);
     }
 
     /**
      * Opens the context menu.
      *
-     *   - query the element on the click-target
-     *   - select the element
      *   - query the context menu service and the context menu elements
      *   - show the context menu
      *   - send a focus state change to indicate that the diagram becomes inactive, once the context menu is shown
      *
      * When the context menu is closed, we focus the diagram element again.
      */
-    protected openContextMenu(event: MouseEvent, target: SModelElement): Promise<Action>[] {
-        const mousePosition = { x: event.x, y: event.y };
-        const selectableTarget = findParentByFeature(target, isSelectable);
-        if (selectableTarget) {
-            selectableTarget.selected = true;
-            this.selectionService.updateSelection(target.root, [selectableTarget.id], []);
+    protected openContextMenu(target: SModelElement, event: MouseEvent): Promise<Action>[] {
+        if (!this.contextMenuService || !this.menuProvider) {
+            return [];
         }
 
+        const mousePosition = { x: event.x, y: event.y };
+
         const result = Promise.all([this.contextMenuService(), this.menuProvider.getItems(target.root, mousePosition)])
             .then(([menuService, menuItems]) => menuService.show(menuItems, mousePosition, () => this.focusEventTarget(event)))
             .then((): Action => FocusStateChangedAction.create(false));

package/src/features/hover/hover.ts

@@ -23,20 +23,11 @@ import {
     SModelRootSchema
 } from '@eclipse-glsp/protocol';
 import { injectable } from 'inversify';
-import {
-    EMPTY_ROOT,
-    HoverFeedbackAction,
-    HoverMouseListener,
-    IActionHandler,
-    ICommand,
-    SIssueMarker,
-    SIssueSeverity,
-    SModelElement
-} from 'sprotty';
+import { EMPTY_ROOT, HoverFeedbackAction, HoverMouseListener, IActionHandler, ICommand, SModelElement } from 'sprotty';
 import { FocusStateChangedAction } from '../../base/actions/focus-change-action';
 import { EnableDefaultToolsAction, EnableToolsAction } from '../../base/tool-manager/tool-actions';
 import { EdgeCreationTool } from '../tools/edge-creation-tool';
-import { GIssueMarker } from '../validation/issue-marker';
+import { getSeverity, GIssueMarker } from '../validation/issue-marker';
 @injectable()
 export class GlspHoverMouseListener extends HoverMouseListener implements IActionHandler {
     protected enableHover = true;
@@ -117,16 +108,3 @@ export class GlspHoverMouseListener extends HoverMouseListener implements IActio
         return bounds;
     }
 }
-
-export function getSeverity(marker: SIssueMarker): SIssueSeverity {
-    let currentSeverity: SIssueSeverity = 'info';
-    for (const severity of marker.issues.map(s => s.severity)) {
-        if (severity === 'error') {
-            return severity;
-        }
-        if (severity === 'warning' && currentSeverity === 'info') {
-            currentSeverity = severity;
-        }
-    }
-    return currentSeverity;
-}

package/src/features/layout/di.config.ts

@@ -14,19 +14,25 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 import { ContainerModule } from 'inversify';
-import { configureCommand, configureLayout, HBoxLayouter, VBoxLayouter } from 'sprotty';
+import { configureActionHandler, configureLayout, HBoxLayouter, VBoxLayouter } from 'sprotty';
 import { FreeFormLayouter } from './freeform-layout';
 import { HBoxLayouterExt } from './hbox-layout';
-import { AlignElementsCommand, ResizeElementsCommand } from './layout-commands';
+import {
+    AlignElementsAction,
+    AlignElementsActionHandler,
+    ResizeElementsAction,
+    ResizeElementsActionHandler
+} from './layout-elements-action';
 import { VBoxLayouterExt } from './vbox-layout';
 
-const layoutCommandsModule = new ContainerModule((bind, _unbind, isBound, rebind) => {
-    configureCommand({ bind, isBound }, ResizeElementsCommand);
-    configureCommand({ bind, isBound }, AlignElementsCommand);
+const layoutModule = new ContainerModule((bind, _unbind, isBound, rebind) => {
+    const context = { bind, isBound };
+    configureActionHandler(context, ResizeElementsAction.KIND, ResizeElementsActionHandler);
+    configureActionHandler(context, AlignElementsAction.KIND, AlignElementsActionHandler);
 
     rebind(VBoxLayouter).to(VBoxLayouterExt);
     rebind(HBoxLayouter).to(HBoxLayouterExt);
     configureLayout({ bind, isBound }, FreeFormLayouter.KIND, FreeFormLayouter);
 });
 
-export default layoutCommandsModule;
+export default layoutModule;

package/src/features/layout/{layout-commands.spec.ts → layout-elements-action.spec.ts}

@@ -48,13 +48,12 @@ import { SelectionService } from '../select/selection-service';
 import { FeedbackActionDispatcher } from '../tool-feedback/feedback-action-dispatcher';
 import {
     AlignElementsAction,
-    AlignElementsCommand,
+    AlignElementsActionHandler,
     Alignment,
-    Reduce,
     ResizeDimension,
     ResizeElementsAction,
-    ResizeElementsCommand
-} from './layout-commands';
+    ResizeElementsActionHandler
+} from './layout-elements-action';
 
 class MockActionDispatcher implements IActionDispatcher {
     constructor(public dispatchedActions: Action[] = []) {}
@@ -71,14 +70,21 @@ class MockActionDispatcher implements IActionDispatcher {
     }
 }
 
+class MockSelectionService extends SelectionService {
+    constructor(public modelRoot: SModelRoot) {
+        super();
+    }
+    override getModelRoot(): Readonly<SModelRoot> {
+        return this.modelRoot;
+    }
+}
+
+// Generic Test setup
 const container = new Container();
 container.load(defaultModule);
 container.bind(TYPES.IFeedbackActionDispatcher).to(FeedbackActionDispatcher).inSingletonScope();
-container.bind(SelectionService).toSelf().inSingletonScope();
-container.bind(TYPES.SelectionService).toService(SelectionService);
 container.rebind(TYPES.IModelFactory).to(SGraphFactory).inSingletonScope();
 const graphFactory = container.get<SGraphFactory>(TYPES.IModelFactory);
-const selectionService = container.get<SelectionService>(TYPES.SelectionService);
 
 const actionDispatcher = new MockActionDispatcher();
 
@@ -125,16 +131,26 @@ const context: CommandExecutionContext = {
 const defaultSize = { height: 10, width: 10 };
 
 describe('AlignElementsCommand', () => {
-    it('should align all elements left', () => {
+    let handler: AlignElementsActionHandler;
+    const setModel = (newModel: SModelRoot): void => {
+        handler['selectionService'] = new MockSelectionService(newModel);
+    };
+
+    beforeEach(() => {
         actionDispatcher.dispatchedActions = [];
+
+        handler = new AlignElementsActionHandler();
+        handler['actionDispatcher'] = actionDispatcher;
+    });
+    it('should align all elements left', () => {
         const newModel = initModel([
             { elementId: 'node1', newPosition: { x: 111, y: 111 }, newSize: defaultSize },
             { elementId: 'node2', newPosition: { x: 222, y: 222 }, newSize: defaultSize },
             { elementId: 'node3', newPosition: { x: 333, y: 333 }, newSize: defaultSize }
         ]);
         const action = AlignElementsAction.create({ elementIds: ['node1', 'node2', 'node3'], alignment: Alignment.Left });
-        const command = new AlignElementsCommand(action, actionDispatcher, selectionService);
-        command.execute(newContext(newModel));
+        setModel(newModel);
+        handler.handle(action);
 
         assertAllBounds(
             new Map([
@@ -146,16 +162,14 @@ describe('AlignElementsCommand', () => {
     });
 
     it('should align all elements right', () => {
-        actionDispatcher.dispatchedActions = [];
         const newModel = initModel([
             { elementId: 'node1', newPosition: { x: 111, y: 111 }, newSize: defaultSize },
             { elementId: 'node2', newPosition: { x: 222, y: 222 }, newSize: defaultSize },
             { elementId: 'node3', newPosition: { x: 333, y: 333 }, newSize: defaultSize }
         ]);
         const action = AlignElementsAction.create({ elementIds: ['node1', 'node2', 'node3'], alignment: Alignment.Right });
-        const command = new AlignElementsCommand(action, actionDispatcher, selectionService);
-        command.execute(newContext(newModel));
-
+        setModel(newModel);
+        handler.handle(action);
         assertAllBounds(
             new Map([
                 ['node1', { x: 333, y: 111, width: defaultSize.width, height: defaultSize.height }],
@@ -173,8 +187,8 @@ describe('AlignElementsCommand', () => {
             { elementId: 'node3', newPosition: { x: 333, y: 333 }, newSize: defaultSize }
         ]);
         const action = AlignElementsAction.create({ elementIds: ['node1', 'node2', 'node3'], alignment: Alignment.Center });
-        const command = new AlignElementsCommand(action, actionDispatcher, selectionService);
-        command.execute(newContext(newModel));
+        setModel(newModel);
+        handler.handle(action);
 
         assertAllBounds(
             new Map([
@@ -186,15 +200,14 @@ describe('AlignElementsCommand', () => {
     });
 
     it('should align all elements top', () => {
-        actionDispatcher.dispatchedActions = [];
         const newModel = initModel([
             { elementId: 'node1', newPosition: { x: 111, y: 111 }, newSize: defaultSize },
             { elementId: 'node2', newPosition: { x: 222, y: 222 }, newSize: defaultSize },
             { elementId: 'node3', newPosition: { x: 333, y: 333 }, newSize: defaultSize }
         ]);
         const action = AlignElementsAction.create({ elementIds: ['node1', 'node2', 'node3'], alignment: Alignment.Top });
-        const command = new AlignElementsCommand(action, actionDispatcher, selectionService);
-        command.execute(newContext(newModel));
+        setModel(newModel);
+        handler.handle(action);
 
         assertAllBounds(
             new Map([
@@ -206,15 +219,14 @@ describe('AlignElementsCommand', () => {
     });
 
     it('should align all elements bottom', () => {
-        actionDispatcher.dispatchedActions = [];
         const newModel = initModel([
             { elementId: 'node1', newPosition: { x: 111, y: 111 }, newSize: defaultSize },
             { elementId: 'node2', newPosition: { x: 222, y: 222 }, newSize: defaultSize },
             { elementId: 'node3', newPosition: { x: 333, y: 333 }, newSize: defaultSize }
         ]);
         const action = AlignElementsAction.create({ elementIds: ['node1', 'node2', 'node3'], alignment: Alignment.Bottom });
-        const command = new AlignElementsCommand(action, actionDispatcher, selectionService);
-        command.execute(newContext(newModel));
+        setModel(newModel);
+        handler.handle(action);
 
         assertAllBounds(
             new Map([
@@ -226,15 +238,14 @@ describe('AlignElementsCommand', () => {
     });
 
     it('should align all elements middle', () => {
-        actionDispatcher.dispatchedActions = [];
         const newModel = initModel([
             { elementId: 'node1', newPosition: { x: 111, y: 111 }, newSize: defaultSize },
             { elementId: 'node2', newPosition: { x: 222, y: 222 }, newSize: defaultSize },
             { elementId: 'node3', newPosition: { x: 333, y: 333 }, newSize: defaultSize }
         ]);
         const action = AlignElementsAction.create({ elementIds: ['node1', 'node2', 'node3'], alignment: Alignment.Middle });
-        const command = new AlignElementsCommand(action, actionDispatcher, selectionService);
-        command.execute(newContext(newModel));
+        setModel(newModel);
+        handler.handle(action);
 
         assertAllBounds(
             new Map([
@@ -247,8 +258,18 @@ describe('AlignElementsCommand', () => {
 });
 
 describe('ResizeElementsCommand', () => {
-    it('should make same width as last', () => {
+    let handler: ResizeElementsActionHandler;
+    const setModel = (newModel: SModelRoot): void => {
+        handler['selectionService'] = new MockSelectionService(newModel);
+    };
+
+    beforeEach(() => {
         actionDispatcher.dispatchedActions = [];
+
+        handler = new ResizeElementsActionHandler();
+        handler['actionDispatcher'] = actionDispatcher;
+    });
+    it('should make same width as last', () => {
         const newModel = initModel([
             { elementId: 'node1', newPosition: { x: 100, y: 100 }, newSize: { height: 10, width: 10 } },
             { elementId: 'node2', newPosition: { x: 100, y: 200 }, newSize: { height: 20, width: 20 } },
@@ -257,10 +278,10 @@ describe('ResizeElementsCommand', () => {
         const action = ResizeElementsAction.create({
             elementIds: ['node1', 'node2', 'node3'],
             dimension: ResizeDimension.Width,
-            reductionFunction: Reduce.last
+            reduceFunction: 'last'
         });
-        const command = new ResizeElementsCommand(action, actionDispatcher, selectionService);
-        command.execute(newContext(newModel));
+        setModel(newModel);
+        handler.handle(action);
 
         // resize is keeping the center, so the X moves by diff / 2
         assertAllBoundsInChangeBounds(
@@ -273,7 +294,6 @@ describe('ResizeElementsCommand', () => {
     });
 
     it('should make same height as last', () => {
-        actionDispatcher.dispatchedActions = [];
         const newModel = initModel([
             { elementId: 'node1', newPosition: { x: 100, y: 100 }, newSize: { height: 10, width: 10 } },
             { elementId: 'node2', newPosition: { x: 100, y: 200 }, newSize: { height: 20, width: 20 } },
@@ -282,10 +302,10 @@ describe('ResizeElementsCommand', () => {
         const action = ResizeElementsAction.create({
             elementIds: ['node1', 'node2', 'node3'],
             dimension: ResizeDimension.Height,
-            reductionFunction: Reduce.last
+            reduceFunction: 'last'
         });
-        const command = new ResizeElementsCommand(action, actionDispatcher, selectionService);
-        command.execute(newContext(newModel));
+        setModel(newModel);
+        handler.handle(action);
 
         // resize is keeping the center, so the Y moves by diff / 2
         assertAllBoundsInChangeBounds(
@@ -298,7 +318,6 @@ describe('ResizeElementsCommand', () => {
     });
 
     it('should make same width and height as last', () => {
-        actionDispatcher.dispatchedActions = [];
         const newModel = initModel([
             { elementId: 'node1', newPosition: { x: 100, y: 100 }, newSize: { height: 10, width: 10 } },
             { elementId: 'node2', newPosition: { x: 100, y: 200 }, newSize: { height: 20, width: 20 } },
@@ -307,10 +326,10 @@ describe('ResizeElementsCommand', () => {
         const action = ResizeElementsAction.create({
             elementIds: ['node1', 'node2', 'node3'],
             dimension: ResizeDimension.Width_And_Height,
-            reductionFunction: Reduce.last
+            reduceFunction: 'last'
         });
-        const command = new ResizeElementsCommand(action, actionDispatcher, selectionService);
-        command.execute(newContext(newModel));
+        setModel(newModel);
+        handler.handle(action);
 
         // resize is keeping the center, so the Y moves by diff / 2
         assertAllBoundsInChangeBounds(
@@ -329,17 +348,6 @@ function initModel(elementAndBounds: ElementAndBounds[]): SModelRoot {
     return setBoundsCommand.execute(context) as SModelRoot;
 }
 
-function newContext(root: SModelRoot): CommandExecutionContext {
-    return {
-        root: root,
-        modelFactory: graphFactory,
-        duration: 0,
-        modelChanged: undefined!,
-        logger: new ConsoleLogger(),
-        syncer: new AnimationFrameSyncer()
-    };
-}
-
 function assertAllBounds(allBounds: Map<string, Bounds>): void {
     allBounds.forEach((bounds, nodeId) => assertBounds(nodeId, bounds));
 }