@eclipse-glsp/client 2.3.0-next.322 → 2.3.0-next.363

package/src/features/tools/edge-creation/edge-creation-tool-feedback.ts

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2019-2023 EclipseSource and others.
+ * Copyright (c) 2019-2024 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
@@ -18,24 +18,31 @@ import {
     AnchorComputerRegistry,
     Bounds,
     Disposable,
+    GConnectableElement,
+    GModelElement,
     MouseListener,
     MoveAction,
     Point,
     PolylineEdgeRouter,
-    GConnectableElement,
-    GModelElement,
     findChildrenAtPosition,
     findParentByFeature,
     isBoundsAware,
     isConnectable
 } from '@eclipse-glsp/sprotty';
 import { IFeedbackActionDispatcher } from '../../../base/feedback/feedback-action-dispatcher';
+import { FeedbackEmitter } from '../../../base/feedback/feedback-emitter';
 import { absoluteToParent, getAbsolutePosition, toAbsoluteBounds } from '../../../utils/viewpoint-util';
 import { FeedbackEdgeEnd, feedbackEdgeEndId } from './dangling-edge-feedback';
 
 export class FeedbackEdgeEndMovingMouseListener extends MouseListener implements Disposable {
-    constructor(protected anchorRegistry: AnchorComputerRegistry, protected feedbackDispatcher: IFeedbackActionDispatcher) {
+    protected feedback: FeedbackEmitter;
+
+    constructor(
+        protected anchorRegistry: AnchorComputerRegistry,
+        protected feedbackDispatcher: IFeedbackActionDispatcher
+    ) {
         super();
+        this.feedback = feedbackDispatcher.createEmitter();
     }
 
     override mouseMove(target: GModelElement, event: MouseEvent): Action[] {
@@ -54,14 +61,10 @@ export class FeedbackEdgeEndMovingMouseListener extends MouseListener implements
         if (endAtMousePosition instanceof GConnectableElement && edge.source && isBoundsAware(edge.source)) {
             const anchor = this.computeAbsoluteAnchor(endAtMousePosition, Bounds.center(toAbsoluteBounds(edge.source)));
             if (Point.euclideanDistance(anchor, edgeEnd.position) > 1) {
-                this.feedbackDispatcher.registerFeedback(this, [
-                    MoveAction.create([{ elementId: edgeEnd.id, toPosition: anchor }], { animate: false })
-                ]);
+                this.feedback.add(MoveAction.create([{ elementId: edgeEnd.id, toPosition: anchor }], { animate: false })).submit();
             }
         } else {
-            this.feedbackDispatcher.registerFeedback(this, [
-                MoveAction.create([{ elementId: edgeEnd.id, toPosition: position }], { animate: false })
-            ]);
+            this.feedback.add(MoveAction.create([{ elementId: edgeEnd.id, toPosition: position }], { animate: false })).submit();
         }
 
         return [];
@@ -84,6 +87,6 @@ export class FeedbackEdgeEndMovingMouseListener extends MouseListener implements
     }
 
     dispose(): void {
-        this.feedbackDispatcher.deregisterFeedback(this);
+        this.feedback.dispose();
     }
 }

package/src/features/tools/edge-creation/edge-creation-tool.ts

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2019-2023 EclipseSource and others.
+ * Copyright (c) 2019-2024 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,28 +13,31 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-import { inject, injectable } from 'inversify';
 import {
     Action,
     AnchorComputerRegistry,
+    Args,
     CreateEdgeOperation,
-    RequestCheckEdgeAction,
     GModelElement,
+    RequestCheckEdgeAction,
     TYPES,
     TriggerEdgeCreationAction,
     findParentByFeature,
     isConnectable,
     isCtrlOrCmd
 } from '@eclipse-glsp/sprotty';
+import { inject, injectable, optional } from 'inversify';
 import { GLSPActionDispatcher } from '../../../base/action-dispatcher';
 import { DragAwareMouseListener } from '../../../base/drag-aware-mouse-listener';
 import { CursorCSS, cursorFeedbackAction } from '../../../base/feedback/css-feedback';
+import { FeedbackEmitter } from '../../../base/feedback/feedback-emitter';
 import { EnableDefaultToolsAction } from '../../../base/tool-manager/tool';
+import { GEdge } from '../../../model';
+import { Grid } from '../../grid/grid';
 import { ITypeHintProvider } from '../../hints/type-hint-provider';
 import { BaseCreationTool } from '../base-tools';
 import { DrawFeedbackEdgeAction, RemoveFeedbackEdgeAction } from './dangling-edge-feedback';
 import { FeedbackEdgeEndMovingMouseListener } from './edge-creation-tool-feedback';
-import { GEdge } from '../../../model';
 
 /**
  * Tool to create connections in a Diagram, by selecting a source and target node.
@@ -44,8 +47,8 @@ export class EdgeCreationTool extends BaseCreationTool<TriggerEdgeCreationAction
     static ID = 'tool_create_edge';
 
     @inject(AnchorComputerRegistry) protected anchorRegistry: AnchorComputerRegistry;
-
     @inject(TYPES.ITypeHintProvider) protected typeHintProvider: ITypeHintProvider;
+    @optional() @inject(TYPES.Grid) protected grid: Grid;
 
     protected isTriggerAction = TriggerEdgeCreationAction.is;
 
@@ -54,22 +57,35 @@ export class EdgeCreationTool extends BaseCreationTool<TriggerEdgeCreationAction
     }
 
     doEnable(): void {
-        const mouseMovingFeedback = new FeedbackEdgeEndMovingMouseListener(this.anchorRegistry, this.feedbackDispatcher);
-        this.toDisposeOnDisable.push(
-            mouseMovingFeedback,
-            this.mouseTool.registerListener(
-                new EdgeCreationToolMouseListener(this.triggerAction, this.actionDispatcher, this.typeHintProvider, this)
-            ),
-            this.mouseTool.registerListener(mouseMovingFeedback),
-            this.registerFeedback([cursorFeedbackAction(CursorCSS.OPERATION_NOT_ALLOWED)], this, [
-                RemoveFeedbackEdgeAction.create(),
-                cursorFeedbackAction()
-            ])
+        this.toolFeedback();
+        this.creationListener();
+        this.trackFeedbackEdge();
+    }
+
+    protected toolFeedback(): void {
+        const toolFeedback = this.createFeedbackEmitter()
+            .add(cursorFeedbackAction(CursorCSS.OPERATION_NOT_ALLOWED), cursorFeedbackAction())
+            .submit();
+        this.toDisposeOnDisable.push(toolFeedback);
+    }
+
+    protected creationListener(): void {
+        const creationListener = new EdgeCreationToolMouseListener(
+            this.triggerAction,
+            this.actionDispatcher,
+            this.typeHintProvider,
+            this,
+            this.grid ? this.grid.x / 2 : undefined
         );
+        this.toDisposeOnDisable.push(creationListener, this.mouseTool.registerListener(creationListener));
+    }
+
+    protected trackFeedbackEdge(): void {
+        const mouseMovingFeedback = new FeedbackEdgeEndMovingMouseListener(this.anchorRegistry, this.feedbackDispatcher);
+        this.toDisposeOnDisable.push(mouseMovingFeedback, this.mouseTool.registerListener(mouseMovingFeedback));
     }
 }
 
-@injectable()
 export class EdgeCreationToolMouseListener extends DragAwareMouseListener {
     protected source?: string;
     protected target?: string;
@@ -77,61 +93,79 @@ export class EdgeCreationToolMouseListener extends DragAwareMouseListener {
     protected allowedTarget = false;
     protected proxyEdge: GEdge;
     protected pendingDynamicCheck = false;
+    protected cursorFeedback: FeedbackEmitter;
+    protected feedbackEdgeFeedback: FeedbackEmitter;
 
     constructor(
         protected triggerAction: TriggerEdgeCreationAction,
         protected actionDispatcher: GLSPActionDispatcher,
         protected typeHintProvider: ITypeHintProvider,
-        protected tool: EdgeCreationTool
+        protected tool: EdgeCreationTool,
+        protected dragSensitivity?: number
     ) {
-        super();
+        super(dragSensitivity);
         this.proxyEdge = new GEdge();
         this.proxyEdge.type = triggerAction.elementTypeId;
+        this.cursorFeedback = tool.createFeedbackEmitter();
+        this.feedbackEdgeFeedback = tool.createFeedbackEmitter();
     }
 
-    protected reinitialize(): void {
-        this.source = undefined;
-        this.target = undefined;
-        this.currentTarget = undefined;
-        this.allowedTarget = false;
-        this.tool.registerFeedback([RemoveFeedbackEdgeAction.create()]);
-    }
-
-    override nonDraggingMouseUp(_element: GModelElement, event: MouseEvent): Action[] {
+    override nonDraggingMouseUp(element: GModelElement, event: MouseEvent): Action[] {
         const result: Action[] = [];
         if (event.button === 0) {
             if (!this.isSourceSelected()) {
                 if (this.currentTarget && this.allowedTarget) {
                     this.source = this.currentTarget.id;
-                    this.tool.registerFeedback([
-                        DrawFeedbackEdgeAction.create({ elementTypeId: this.triggerAction.elementTypeId, sourceId: this.source })
-                    ]);
+                    this.feedbackEdgeFeedback
+                        .add(
+                            DrawFeedbackEdgeAction.create({ elementTypeId: this.triggerAction.elementTypeId, sourceId: this.source }),
+                            RemoveFeedbackEdgeAction.create()
+                        )
+                        .submit();
                 }
             } else if (this.currentTarget && this.allowedTarget) {
                 this.target = this.currentTarget.id;
             }
             if (this.source && this.target) {
-                result.push(
-                    CreateEdgeOperation.create({
-                        elementTypeId: this.triggerAction.elementTypeId,
-                        sourceElementId: this.source,
-                        targetElementId: this.target,
-                        args: this.triggerAction.args
-                    })
-                );
-                if (!isCtrlOrCmd(event)) {
+                result.push(this.getCreateOperation(element, event, this.source, this.target));
+                if (!this.isContinuousMode(element, event)) {
                     result.push(EnableDefaultToolsAction.create());
                 } else {
-                    this.reinitialize();
+                    this.dispose();
                 }
             }
         } else if (event.button === 2) {
-            this.reinitialize();
+            this.dispose();
             result.push(EnableDefaultToolsAction.create());
         }
         return result;
     }
 
+    /**
+     * Determines wether the tool should run in continuous mode (also called stamp mode) or not.
+     * If continuous mode is enabled, the tool will stay after a successful creation.
+     * The user can then create more elements of the same type without having to re-trigger the tool.
+     * By default, continuous mode is enabled if the user holds the CTRL key.
+     * @param element the current model element
+     * @param event
+     */
+    protected isContinuousMode(element: GModelElement, event: MouseEvent): boolean {
+        return isCtrlOrCmd(event);
+    }
+
+    protected getCreateOperation(element: GModelElement, event: MouseEvent, sourceElementId: string, targetElementId: string): Action {
+        return CreateEdgeOperation.create({
+            elementTypeId: this.triggerAction.elementTypeId,
+            sourceElementId,
+            targetElementId,
+            args: this.getCreateEdgeOperationArgs(element, event)
+        });
+    }
+
+    protected getCreateEdgeOperationArgs(ctx: GModelElement, event: MouseEvent): Args | undefined {
+        return { ...this.triggerAction.args };
+    }
+
     protected isSourceSelected(): boolean {
         return this.source !== undefined;
     }
@@ -203,4 +237,14 @@ export class EdgeCreationToolMouseListener extends DragAwareMouseListener {
         const typeHint = this.typeHintProvider.getEdgeTypeHint(edgeTypeId);
         return typeHint?.dynamic ?? false;
     }
+
+    override dispose(): void {
+        this.source = undefined;
+        this.target = undefined;
+        this.currentTarget = undefined;
+        this.allowedTarget = false;
+        this.feedbackEdgeFeedback.dispose();
+        this.cursorFeedback.dispose();
+        super.dispose();
+    }
 }

package/src/features/tools/edge-creation/view.tsx

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2019-2023 EclipseSource and others.
+ * Copyright (c) 2019-2024 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,12 +13,10 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
+/** @jsx svg */
+import { GModelElement, IView, Point, RenderingContext, svg } from '@eclipse-glsp/sprotty';
 import { injectable } from 'inversify';
 import { VNode } from 'snabbdom';
-import { IView, Point, RenderingContext, GModelElement, svg } from '@eclipse-glsp/sprotty';
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const JSX = { createElement: svg };
 
 /**
  * This view is used for the invisible end of the feedback edge.

package/src/features/tools/edge-edit/edge-edit-module.ts

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2019-2023 EclipseSource and others.
+ * Copyright (c) 2019-2024 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
@@ -23,16 +23,19 @@ import {
     SwitchRoutingModeCommand
 } from './edge-edit-tool-feedback';
 
-export const edgeEditToolModule = new FeatureModule((bind, unbind, isBound, rebind) => {
-    const context = { bind, unbind, isBound, rebind };
-    bindAsService(context, TYPES.IDefaultTool, EdgeEditTool);
+export const edgeEditToolModule = new FeatureModule(
+    (bind, unbind, isBound, rebind) => {
+        const context = { bind, unbind, isBound, rebind };
+        bindAsService(context, TYPES.IDefaultTool, EdgeEditTool);
 
-    // reconnect edge tool feedback
-    configureCommand(context, ShowEdgeReconnectHandlesFeedbackCommand);
-    configureCommand(context, HideEdgeReconnectHandlesFeedbackCommand);
-    configureCommand(context, DrawFeedbackEdgeSourceCommand);
-    configureCommand(context, SwitchRoutingModeCommand);
+        // reconnect edge tool feedback
+        configureCommand(context, ShowEdgeReconnectHandlesFeedbackCommand);
+        configureCommand(context, HideEdgeReconnectHandlesFeedbackCommand);
+        configureCommand(context, DrawFeedbackEdgeSourceCommand);
+        configureCommand(context, SwitchRoutingModeCommand);
 
-    // dangling edge feedback
-    configureDanglingFeedbackEdge(context);
-});
+        // dangling edge feedback
+        configureDanglingFeedbackEdge(context);
+    },
+    { featureId: Symbol('edgeEditTool') }
+);

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

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2019-2023 EclipseSource and others.
+ * Copyright (c) 2019-2024 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
@@ -21,7 +21,6 @@ import {
     CommandReturn,
     Disposable,
     EdgeRouterRegistry,
-    ElementMove,
     GConnectableElement,
     GModelElement,
     GRoutingHandle,
@@ -37,19 +36,22 @@ import {
     hasStringProp,
     isBoundsAware,
     isConnectable,
-    isSelected
+    isSelected,
+    toTypeGuard,
+    typeGuard
 } from '@eclipse-glsp/sprotty';
 import { inject, injectable } from 'inversify';
+import { DragAwareMouseListener } from '../../../base/drag-aware-mouse-listener';
 import { IFeedbackActionDispatcher } from '../../../base/feedback/feedback-action-dispatcher';
 import { FeedbackCommand } from '../../../base/feedback/feedback-command';
-import { forEachElement, isRoutable, isRoutingHandle } from '../../../utils/gmodel-util';
+import { FeedbackEmitter } from '../../../base/feedback/feedback-emitter';
+import { forEachElement, getMatchingElements, isRoutable, isRoutingHandle } from '../../../utils/gmodel-util';
 import { getAbsolutePosition, toAbsoluteBounds } from '../../../utils/viewpoint-util';
-import { PositionSnapper } from '../../change-bounds/position-snapper';
-import { useSnap } from '../../change-bounds/snap';
 import { addReconnectHandles, removeReconnectHandles } from '../../reconnect/model';
+import { ChangeBoundsManager } from '../change-bounds/change-bounds-manager';
+import { ChangeBoundsTracker, MoveableRoutingHandle } from '../change-bounds/change-bounds-tracker';
 import { FeedbackEdgeEnd, feedbackEdgeEndId, feedbackEdgeId } from '../edge-creation/dangling-edge-feedback';
 import { FeedbackEdgeEndMovingMouseListener } from '../edge-creation/edge-creation-tool-feedback';
-import { PointPositionUpdater } from '../../change-bounds/point-position-updater';
 
 /**
  * RECONNECT HANDLES FEEDBACK
@@ -198,11 +200,14 @@ export class FeedbackEdgeTargetMovingMouseListener extends FeedbackEdgeEndMoving
 }
 
 export class FeedbackEdgeSourceMovingMouseListener extends MouseListener implements Disposable {
+    protected feedback: FeedbackEmitter;
+
     constructor(
         protected anchorRegistry: AnchorComputerRegistry,
         protected feedbackDispatcher: IFeedbackActionDispatcher
     ) {
         super();
+        this.feedback = feedbackDispatcher.createEmitter();
     }
 
     override mouseMove(target: GModelElement, event: MouseEvent): Action[] {
@@ -221,14 +226,10 @@ export class FeedbackEdgeSourceMovingMouseListener extends MouseListener impleme
         if (endAtMousePosition instanceof GConnectableElement && edge.target && isBoundsAware(edge.target)) {
             const anchor = this.computeAbsoluteAnchor(endAtMousePosition, Bounds.center(edge.target.bounds));
             if (Point.euclideanDistance(anchor, edgeEnd.position) > 1) {
-                this.feedbackDispatcher.registerFeedback(this, [
-                    MoveAction.create([{ elementId: edgeEnd.id, toPosition: anchor }], { animate: false })
-                ]);
+                this.feedback.add(MoveAction.create([{ elementId: edgeEnd.id, toPosition: anchor }], { animate: false })).submit();
             }
         } else {
-            this.feedbackDispatcher.registerFeedback(this, [
-                MoveAction.create([{ elementId: edgeEnd.id, toPosition: position }], { animate: false })
-            ]);
+            this.feedback.add(MoveAction.create([{ elementId: edgeEnd.id, toPosition: position }], { animate: false })).submit();
         }
 
         return [];
@@ -250,85 +251,66 @@ export class FeedbackEdgeSourceMovingMouseListener extends MouseListener impleme
     }
 
     dispose(): void {
-        this.feedbackDispatcher.deregisterFeedback(this);
+        this.feedback.dispose();
     }
 }
 
-export class FeedbackEdgeRouteMovingMouseListener extends MouseListener {
-    protected pointPositionUpdater: PointPositionUpdater;
+export class FeedbackEdgeRouteMovingMouseListener extends DragAwareMouseListener {
+    protected tracker: ChangeBoundsTracker;
 
     constructor(
-        protected positionSnapper: PositionSnapper,
+        protected changeBoundsManager: ChangeBoundsManager,
         protected edgeRouterRegistry?: EdgeRouterRegistry
     ) {
         super();
-        this.pointPositionUpdater = new PointPositionUpdater(positionSnapper);
+        this.tracker = this.changeBoundsManager.createTracker();
     }
 
     override mouseDown(target: GModelElement, event: MouseEvent): Action[] {
-        const result: Action[] = [];
+        const result = super.mouseDown(target, event);
         if (event.button === 0) {
             const routingHandle = findParentByFeature(target, isRoutingHandle);
             if (routingHandle !== undefined) {
                 result.push(SwitchRoutingModeAction.create({ elementsToActivate: [target.id] }));
-                this.pointPositionUpdater.updateLastDragPosition(event);
+                this.tracker.startTracking();
             } else {
-                this.pointPositionUpdater.resetPosition();
+                this.tracker.dispose();
             }
         }
         return result;
     }
 
-    override mouseMove(target: GModelElement, event: MouseEvent): Action[] {
-        const result: Action[] = [];
-        if (event.buttons === 0) {
-            return this.mouseUp(target, event);
-        }
-        const positionUpdate = this.pointPositionUpdater.updatePosition(target, event);
-        if (positionUpdate) {
-            const moveActions = this.handleMoveOnClient(target, positionUpdate, useSnap(event));
-            result.push(...moveActions);
-        }
-        return result;
-    }
-
-    protected handleMoveOnClient(target: GModelElement, 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 })];
+    override draggingMouseMove(target: GModelElement, event: MouseEvent): Action[] {
+        super.draggingMouseMove(target, event);
+        if (this.tracker.isTracking()) {
+            return this.moveRoutingHandles(target, event);
         }
         return [];
     }
 
-    protected toElementMove(element: GRoutingHandle, 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
-                }
-            };
+    protected moveRoutingHandles(target: GModelElement, event: MouseEvent): Action[] {
+        const routingHandlesToMove = this.getRoutingHandlesToMove(target);
+        const move = this.tracker.moveElements(routingHandlesToMove, { snap: event, restrict: event });
+        if (move.elementMoves.length === 0) {
+            return [];
         }
-        return undefined;
+        this.tracker.updateTrackingPosition(move);
+        return [
+            MoveAction.create(
+                move.elementMoves.map(elementMove => ({ elementId: elementMove.element.id, toPosition: elementMove.toPosition })),
+                { animate: false }
+            )
+        ];
     }
 
-    protected getSnappedHandlePosition(element: GRoutingHandle, point: Point, isSnap: boolean): Point {
-        return this.positionSnapper?.snapPosition(point, element, isSnap);
+    protected getRoutingHandlesToMove(context: GModelElement): MoveableRoutingHandle[] {
+        const selectedRoutingHandles = getMatchingElements(context.root.index, typeGuard(isRoutingHandle, isSelected));
+        return selectedRoutingHandles
+            .map(handle => {
+                const position = this.getHandlePosition(handle);
+                return position ? new MoveableRoutingHandle(handle, position) : undefined;
+            })
+            .filter(toTypeGuard(MoveableRoutingHandle));
     }
 
     protected getHandlePosition(handle: GRoutingHandle): Point | undefined {
@@ -344,10 +326,24 @@ export class FeedbackEdgeRouteMovingMouseListener extends MouseListener {
         return undefined;
     }
 
-    override mouseUp(_target: GModelElement, _event: MouseEvent): Action[] {
-        this.pointPositionUpdater.resetPosition();
+    override nonDraggingMouseUp(element: GModelElement, event: MouseEvent): Action[] {
+        // should reset everything that may have happend on mouse down
+        this.tracker.stopTracking();
+        return [];
+    }
+
+    override draggingMouseUp(_target: GModelElement, _event: MouseEvent): Action[] {
+        if (!this.tracker.isTracking()) {
+            return [];
+        }
+        this.dispose();
         return [];
     }
+
+    override dispose(): void {
+        this.tracker.dispose();
+        super.dispose();
+    }
 }
 
 /**