@eclipse-glsp/client 0.10.0-next.ca17587.154 → 1.1.0-RC01

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

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2019-2021 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,24 +13,21 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-import { Action, Point } from '@eclipse-glsp/protocol';
+import { Action, Bounds, hasStringProp, Point } from '@eclipse-glsp/protocol';
 import { inject, injectable } from 'inversify';
 import { VNode } from 'snabbdom';
 import {
-    add,
     AnchorComputerRegistry,
-    center,
     CommandExecutionContext,
     CommandReturn,
     EdgeRouterRegistry,
     ElementMove,
-    euclideanDistance,
     findChildrenAtPosition,
     findParentByFeature,
     isBoundsAware,
     isConnectable,
+    ISnapper,
     isSelected,
-    isViewport,
     MouseListener,
     MoveAction,
     PolylineEdgeRouter,
@@ -42,8 +39,9 @@ import {
     SwitchEditModeCommand,
     TYPES
 } from 'sprotty';
-import { isNotUndefined, isRoutable, isRoutingHandle } from '../../utils/smodel-util';
+import { forEachElement, isRoutable, isRoutingHandle } from '../../utils/smodel-util';
 import { getAbsolutePosition, toAbsoluteBounds } from '../../utils/viewpoint-util';
+import { PointPositionUpdater } from '../change-bounds/snap';
 import { addReconnectHandles, removeReconnectHandles } from '../reconnect/model';
 import { FeedbackEdgeEnd, feedbackEdgeEndId, FeedbackEdgeEndMovingMouseListener, feedbackEdgeId } from './creation-tool-feedback';
 import { FeedbackCommand } from './model';
@@ -51,18 +49,41 @@ import { FeedbackCommand } from './model';
 /**
  * RECONNECT HANDLES FEEDBACK
  */
+export interface ShowEdgeReconnectHandlesFeedbackAction extends Action {
+    kind: typeof ShowEdgeReconnectHandlesFeedbackAction.KIND;
+    readonly elementId: string;
+}
+
+export namespace ShowEdgeReconnectHandlesFeedbackAction {
+    export const KIND = 'showReconnectHandlesFeedback';
 
-export class ShowEdgeReconnectHandlesFeedbackAction implements Action {
-    constructor(readonly elementId?: string, public readonly kind: string = ShowEdgeReconnectHandlesFeedbackCommand.KIND) {}
+    export function is(object: any): object is ShowEdgeReconnectHandlesFeedbackAction {
+        return Action.hasKind(object, KIND);
+    }
+
+    export function create(elementId: string): ShowEdgeReconnectHandlesFeedbackAction {
+        return { kind: KIND, elementId };
+    }
 }
+export interface HideEdgeReconnectHandlesFeedbackAction extends Action {
+    kind: typeof HideEdgeReconnectHandlesFeedbackAction.KIND;
+}
+
+export namespace HideEdgeReconnectHandlesFeedbackAction {
+    export const KIND = 'hideReconnectHandlesFeedback';
 
-export class HideEdgeReconnectHandlesFeedbackAction implements Action {
-    constructor(public readonly kind: string = HideEdgeReconnectHandlesFeedbackCommand.KIND) {}
+    export function is(object: any): object is HideEdgeReconnectHandlesFeedbackAction {
+        return Action.hasKind(object, KIND);
+    }
+
+    export function create(): HideEdgeReconnectHandlesFeedbackAction {
+        return { kind: KIND };
+    }
 }
 
 @injectable()
 export class ShowEdgeReconnectHandlesFeedbackCommand extends FeedbackCommand {
-    static readonly KIND = 'showReconnectHandlesFeedback';
+    static readonly KIND = ShowEdgeReconnectHandlesFeedbackAction.KIND;
 
     constructor(@inject(TYPES.Action) protected action: ShowEdgeReconnectHandlesFeedbackAction) {
         super();
@@ -70,21 +91,20 @@ export class ShowEdgeReconnectHandlesFeedbackCommand extends FeedbackCommand {
 
     execute(context: CommandExecutionContext): CommandReturn {
         const index = context.root.index;
-        index.all().filter(isRoutable).forEach(removeReconnectHandles);
+        forEachElement(index, isRoutable, removeReconnectHandles);
 
-        if (isNotUndefined(this.action.elementId)) {
-            const routableElement = index.getById(this.action.elementId);
-            if (isNotUndefined(routableElement) && isRoutable(routableElement)) {
-                addReconnectHandles(routableElement);
-            }
+        const routableElement = index.getById(this.action.elementId);
+        if (routableElement && isRoutable(routableElement)) {
+            addReconnectHandles(routableElement);
         }
+
         return context.root;
     }
 }
 
 @injectable()
 export class HideEdgeReconnectHandlesFeedbackCommand extends FeedbackCommand {
-    static readonly KIND = 'hideReconnectHandlesFeedback';
+    static readonly KIND = HideEdgeReconnectHandlesFeedbackAction.KIND;
 
     constructor(@inject(TYPES.Action) protected action: HideEdgeReconnectHandlesFeedbackAction) {
         super();
@@ -92,7 +112,7 @@ export class HideEdgeReconnectHandlesFeedbackCommand extends FeedbackCommand {
 
     execute(context: CommandExecutionContext): CommandReturn {
         const index = context.root.index;
-        index.all().filter(isRoutable).forEach(removeReconnectHandles);
+        forEachElement(index, isRoutable, removeReconnectHandles);
         return context.root;
     }
 }
@@ -100,21 +120,24 @@ export class HideEdgeReconnectHandlesFeedbackCommand extends FeedbackCommand {
  * ROUTING FEEDBACK
  */
 
-export class SwitchRoutingModeAction extends SwitchEditModeAction {
-    constructor(
-        public readonly elementsToActivate: string[] = [],
-        public readonly elementsToDeactivate: string[] = [],
-        public readonly kind: string = SwitchRoutingModeCommand.KIND
-    ) {
-        super(elementsToActivate, elementsToDeactivate);
-    }
+export interface SwitchRoutingModeAction extends Omit<SwitchEditModeAction, 'kind'> {
+    kind: typeof SwitchRoutingModeAction.KIND;
 }
 
+export namespace SwitchRoutingModeAction {
+    export const KIND = 'switchRoutingMode';
+    export function create(options: { elementsToActivate?: string[]; elementsToDeactivate?: string[] }): SwitchRoutingModeAction {
+        return {
+            ...SwitchEditModeAction.create(options),
+            kind: KIND
+        };
+    }
+}
 @injectable()
 export class SwitchRoutingModeCommand extends SwitchEditModeCommand {
-    static KIND = 'switchRoutingMode';
+    static override KIND = SwitchRoutingModeAction.KIND;
     constructor(@inject(TYPES.Action) action: SwitchRoutingModeAction) {
-        super(action);
+        super({ ...action, kind: SwitchEditModeAction.KIND });
     }
 }
 
@@ -122,17 +145,30 @@ export class SwitchRoutingModeCommand extends SwitchEditModeCommand {
  * SOURCE AND TARGET EDGE FEEDBACK
  */
 
-export class DrawFeedbackEdgeSourceAction implements Action {
-    constructor(
-        readonly elementTypeId: string,
-        readonly targetId: string,
-        public readonly kind: string = DrawFeedbackEdgeSourceCommand.KIND
-    ) {}
+export interface DrawFeedbackEdgeSourceAction extends Action {
+    kind: typeof DrawFeedbackEdgeSourceAction.KIND;
+    elementTypeId: string;
+    targetId: string;
+}
+
+export namespace DrawFeedbackEdgeSourceAction {
+    export const KIND = 'drawFeedbackEdgeSource';
+
+    export function is(object: any): object is DrawFeedbackEdgeSourceAction {
+        return Action.hasKind(object, KIND) && hasStringProp(object, 'elementTypeId') && hasStringProp(object, 'targetId');
+    }
+
+    export function create(options: { elementTypeId: string; targetId: string }): DrawFeedbackEdgeSourceAction {
+        return {
+            kind: KIND,
+            ...options
+        };
+    }
 }
 
 @injectable()
 export class DrawFeedbackEdgeSourceCommand extends FeedbackCommand {
-    static readonly KIND = 'drawFeedbackEdgeSource';
+    static readonly KIND = DrawFeedbackEdgeSourceAction.KIND;
 
     constructor(@inject(TYPES.Action) protected action: DrawFeedbackEdgeSourceAction) {
         super();
@@ -149,7 +185,7 @@ export class DrawFeedbackEdgeSourceCommand extends FeedbackCommand {
  */
 
 export class FeedbackEdgeTargetMovingMouseListener extends FeedbackEdgeEndMovingMouseListener {
-    constructor(protected anchorRegistry: AnchorComputerRegistry) {
+    constructor(protected override anchorRegistry: AnchorComputerRegistry) {
         super(anchorRegistry);
     }
 }
@@ -159,7 +195,7 @@ export class FeedbackEdgeSourceMovingMouseListener extends MouseListener {
         super();
     }
 
-    mouseMove(target: SModelElement, event: MouseEvent): Action[] {
+    override mouseMove(target: SModelElement, event: MouseEvent): Action[] {
         const root = target.root;
         const edgeEnd = root.index.getById(feedbackEdgeEndId(root));
         if (!(edgeEnd instanceof FeedbackEdgeEnd) || !edgeEnd.feedbackEdge) {
@@ -173,12 +209,12 @@ export class FeedbackEdgeSourceMovingMouseListener extends MouseListener {
         );
 
         if (endAtMousePosition instanceof SConnectableElement && edge.target && isBoundsAware(edge.target)) {
-            const anchor = this.computeAbsoluteAnchor(endAtMousePosition, center(edge.target.bounds));
-            if (euclideanDistance(anchor, edgeEnd.position) > 1) {
-                return [new MoveAction([{ elementId: edgeEnd.id, toPosition: anchor }], false)];
+            const anchor = this.computeAbsoluteAnchor(endAtMousePosition, Bounds.center(edge.target.bounds));
+            if (Point.euclideanDistance(anchor, edgeEnd.position) > 1) {
+                return [MoveAction.create([{ elementId: edgeEnd.id, toPosition: anchor }], { animate: false })];
             }
         } else {
-            return [new MoveAction([{ elementId: edgeEnd.id, toPosition: position }], false)];
+            return [MoveAction.create([{ elementId: edgeEnd.id, toPosition: position }], { animate: false })];
         }
 
         return [];
@@ -193,7 +229,7 @@ export class FeedbackEdgeSourceMovingMouseListener extends MouseListener {
             const parent = findParentByFeature(element.parent, isBoundsAware);
             if (parent) {
                 const absoluteParentPosition = toAbsoluteBounds(parent);
-                anchor = add(absoluteParentPosition, anchor);
+                anchor = Point.add(absoluteParentPosition, anchor);
             }
         }
         return anchor;
@@ -201,65 +237,82 @@ export class FeedbackEdgeSourceMovingMouseListener extends MouseListener {
 }
 
 export class FeedbackEdgeRouteMovingMouseListener extends MouseListener {
-    protected hasDragged = false;
-    protected lastDragPosition: Point | undefined;
+    protected pointPositionUpdater: PointPositionUpdater;
 
-    constructor(protected edgeRouterRegistry?: EdgeRouterRegistry) {
+    constructor(protected edgeRouterRegistry?: EdgeRouterRegistry, protected snapper?: ISnapper) {
         super();
+        this.pointPositionUpdater = new PointPositionUpdater(snapper);
     }
 
-    mouseDown(target: SModelElement, event: MouseEvent): Action[] {
+    override mouseDown(target: SModelElement, event: MouseEvent): Action[] {
         const result: Action[] = [];
         if (event.button === 0) {
             const routingHandle = findParentByFeature(target, isRoutingHandle);
             if (routingHandle !== undefined) {
-                result.push(new SwitchRoutingModeAction([target.id], []));
-                this.lastDragPosition = { x: event.pageX, y: event.pageY };
+                result.push(SwitchRoutingModeAction.create({ elementsToActivate: [target.id] }));
+                this.pointPositionUpdater.updateLastDragPosition({ x: event.pageX, y: event.pageY });
             } else {
-                this.lastDragPosition = undefined;
+                this.pointPositionUpdater.resetPosition();
             }
-            this.hasDragged = false;
         }
         return result;
     }
 
-    mouseMove(target: SModelElement, event: MouseEvent): Action[] {
+    override mouseMove(target: SModelElement, event: MouseEvent): Action[] {
         const result: Action[] = [];
         if (event.buttons === 0) {
-            this.mouseUp(target, event);
-        } else if (this.lastDragPosition) {
-            const viewport = findParentByFeature(target, isViewport);
-            this.hasDragged = true;
-            const zoom = viewport ? viewport.zoom : 1;
-            const dx = (event.pageX - this.lastDragPosition.x) / zoom;
-            const dy = (event.pageY - this.lastDragPosition.y) / zoom;
-            const handleMoves: ElementMove[] = [];
-            target.root.index
-                .all()
-                .filter(element => isSelected(element))
-                .forEach(element => {
-                    if (isRoutingHandle(element)) {
-                        const point = this.getHandlePosition(element);
-                        if (point !== undefined) {
-                            handleMoves.push({
-                                elementId: element.id,
-                                fromPosition: point,
-                                toPosition: {
-                                    x: point.x + dx,
-                                    y: point.y + dy
-                                }
-                            });
-                        }
-                    }
-                });
-            this.lastDragPosition = { x: event.pageX, y: event.pageY };
-            if (handleMoves.length > 0) {
-                result.push(new MoveAction(handleMoves, false));
-            }
+            return this.mouseUp(target, event);
+        }
+        const positionUpdate = this.pointPositionUpdater.updatePosition(target, { x: event.pageX, y: event.pageY }, !event.altKey);
+        if (positionUpdate) {
+            const moveActions = this.handleMoveOnClient(target, positionUpdate, !event.altKey);
+            result.push(...moveActions);
         }
         return result;
     }
 
+    protected handleMoveOnClient(target: SModelElement, positionUpdate: Point, isSnap: boolean): Action[] {
+        const handleMoves: ElementMove[] = [];
+        target.root.index
+            .all()
+            .filter(element => isSelected(element))
+            .forEach(element => {
+                if (isRoutingHandle(element)) {
+                    const elementMove = this.toElementMove(element, positionUpdate, isSnap);
+                    if (elementMove) {
+                        handleMoves.push(elementMove);
+                    }
+                }
+            });
+        if (handleMoves.length > 0) {
+            return [MoveAction.create(handleMoves, { animate: false })];
+        }
+        return [];
+    }
+
+    protected toElementMove(element: SRoutingHandle, positionDelta: Point, isSnap: boolean): ElementMove | undefined {
+        const point = this.getHandlePosition(element);
+        if (point !== undefined) {
+            const snappedPoint = this.getSnappedHandlePosition(element, point, isSnap);
+            return {
+                elementId: element.id,
+                fromPosition: point,
+                toPosition: {
+                    x: snappedPoint.x + positionDelta.x,
+                    y: snappedPoint.y + positionDelta.y
+                }
+            };
+        }
+        return undefined;
+    }
+
+    protected getSnappedHandlePosition(element: SRoutingHandle, point: Point, isSnap: boolean): Point {
+        if (this.snapper && isSnap) {
+            return this.snapper.snap(point, element);
+        }
+        return point;
+    }
+
     protected getHandlePosition(handle: SRoutingHandle): Point | undefined {
         if (this.edgeRouterRegistry) {
             const parent = handle.parent;
@@ -273,20 +326,19 @@ export class FeedbackEdgeRouteMovingMouseListener extends MouseListener {
         return undefined;
     }
 
-    mouseEnter(target: SModelElement, event: MouseEvent): Action[] {
+    override mouseEnter(target: SModelElement, event: MouseEvent): Action[] {
         if (target instanceof SModelRoot && event.buttons === 0) {
             this.mouseUp(target, event);
         }
         return [];
     }
 
-    mouseUp(_target: SModelElement, event: MouseEvent): Action[] {
-        this.hasDragged = false;
-        this.lastDragPosition = undefined;
+    override mouseUp(_target: SModelElement, event: MouseEvent): Action[] {
+        this.pointPositionUpdater.resetPosition();
         return [];
     }
 
-    decorate(vnode: VNode, _element: SModelElement): VNode {
+    override decorate(vnode: VNode, _element: SModelElement): VNode {
         return vnode;
     }
 }

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

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2019-2021 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
@@ -15,7 +15,8 @@
  ********************************************************************************/
 import { Action } from '@eclipse-glsp/protocol';
 import { inject, injectable } from 'inversify';
-import { IActionDispatcher, ILogger, TYPES } from 'sprotty';
+import { IActionDispatcher, ILogger } from 'sprotty';
+import { TYPES } from '../../base/types';
 
 export interface IFeedbackEmitter {}
 
@@ -30,7 +31,7 @@ export interface IFeedbackEmitter {}
  * extending the `SModelRoot`. Therefore, tools can register themselves
  * as feedback emitters with actions they want to place for showing
  * feedback. This dispatcher will then re-establish all feedback actions
- * of the registered tools, whenever the `SModelRoot` has been set or updated.
+ * of the registered emitters, whenever the `SModelRoot` has been set or updated.
  */
 export interface IFeedbackActionDispatcher {
     /**

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

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2021 EclipseSource and others.
+ * Copyright (c) 2021-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,7 +13,7 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-import { Action, Point } from '@eclipse-glsp/protocol';
+import { Action, hasObjectProp, Point } from '@eclipse-glsp/protocol';
 import { inject, injectable } from 'inversify';
 import {
     AnchorComputerRegistry,
@@ -27,17 +27,30 @@ import {
 } 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
-    ) {}
+export interface DrawMarqueeAction extends Action {
+    kind: typeof DrawMarqueeAction.KIND;
+    startPoint: Point;
+    endPoint: Point;
+}
+
+export namespace DrawMarqueeAction {
+    export const KIND = 'drawMarquee';
+
+    export function is(object: any): object is DrawMarqueeAction {
+        return Action.hasKind(object, KIND) && hasObjectProp(object, 'startPoint') && hasObjectProp(object, 'endPoint');
+    }
+
+    export function create(options: { startPoint: Point; endPoint: Point }): DrawMarqueeAction {
+        return {
+            kind: KIND,
+            ...options
+        };
+    }
 }
 
 @injectable()
 export class DrawMarqueeCommand extends FeedbackCommand {
-    static readonly KIND = 'drawMarquee';
+    static readonly KIND = DrawMarqueeAction.KIND;
 
     constructor(@inject(TYPES.Action) protected action: DrawMarqueeAction) {
         super();
@@ -49,13 +62,25 @@ export class DrawMarqueeCommand extends FeedbackCommand {
     }
 }
 
-export class RemoveMarqueeAction implements Action {
-    constructor(public readonly kind: string = RemoveMarqueeCommand.KIND) {}
+export interface RemoveMarqueeAction extends Action {
+    kind: typeof RemoveMarqueeAction.KIND;
+}
+
+export namespace RemoveMarqueeAction {
+    export const KIND = 'removeMarquee';
+
+    export function is(object: any): object is RemoveMarqueeAction {
+        return Action.hasKind(object, KIND);
+    }
+
+    export function create(): RemoveMarqueeAction {
+        return { kind: KIND };
+    }
 }
 
 @injectable()
 export class RemoveMarqueeCommand extends FeedbackCommand {
-    static readonly KIND = 'removeMarqueeCommand';
+    static readonly KIND = RemoveMarqueeAction.KIND;
 
     execute(context: CommandExecutionContext): CommandReturn {
         removeMarquee(context.root);
@@ -68,7 +93,7 @@ export class MarqueeEndMovingMouseListener extends MouseListener {
         super();
     }
 
-    mouseMove(target: SModelElement, event: MouseEvent): Action[] {
+    override mouseMove(target: SModelElement, event: MouseEvent): Action[] {
         return [];
     }
 }

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

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2019-2021 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
@@ -19,8 +19,6 @@ export abstract class FeedbackCommand extends Command {
     // used by the `FeedbackAwareUpdateModelCommand`
     readonly priority: number = 0;
 
-    abstract execute(context: CommandExecutionContext): CommandReturn;
-
     undo(context: CommandExecutionContext): CommandReturn {
         return context.root;
     }

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

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2019-2021 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
@@ -16,7 +16,7 @@
 import { Point } from '@eclipse-glsp/protocol';
 import { injectable } from 'inversify';
 import { VNode } from 'snabbdom';
-import { IView, ORIGIN_POINT, RenderingContext, setAttr, SModelElement, svg } from 'sprotty';
+import { IView, RenderingContext, setAttr, SModelElement, svg } from 'sprotty';
 import { isResizable, ResizeHandleLocation, SResizeHandle } from '../change-bounds/model';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -29,7 +29,7 @@ const JSX = { createElement: svg };
 @injectable()
 export class FeedbackEdgeEndView implements IView {
     render(model: Readonly<SModelElement>, context: RenderingContext): VNode {
-        const position: Point = (model as any).position || ORIGIN_POINT;
+        const position: Point = (model as any).position ?? Point.ORIGIN;
         return <g x={position.x} y={position.y} />;
     }
 }

package/src/features/tool-palette/di.config.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
@@ -14,8 +14,9 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 import { ContainerModule } from 'inversify';
-import { configureActionHandler, EnableDefaultToolsAction, TYPES } from 'sprotty';
+import { configureActionHandler, EnableDefaultToolsAction } from 'sprotty';
 import '../../../css/tool-palette.css';
+import { TYPES } from '../../base/types';
 import { EnableToolPaletteAction, ToolPalette } from './tool-palette';
 
 const toolPaletteModule = new ContainerModule((bind, _unbind, isBound, rebind) => {