@eclipse-glsp/client 2.2.0-next.333 → 2.2.0-next.334

package/src/features/tools/change-bounds/change-bounds-tracker.ts

@@ -0,0 +1,455 @@
+/********************************************************************************
+ * Copyright (c) 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
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+
+import {
+    Bounds,
+    Dimension,
+    GModelElement,
+    GRoutingHandle,
+    Locateable,
+    Movement,
+    Point,
+    ResolvedElementMove,
+    TypeGuard,
+    Vector,
+    Writable,
+    hasBooleanProp,
+    isMoveable
+} from '@eclipse-glsp/sprotty';
+import { ChangeBoundsManager } from '..';
+import { BoundsAwareModelElement, MoveableElement, ResizableModelElement, getElements } from '../../../utils';
+import { DiagramMovementCalculator, ResizeHandleLocation, SResizeHandle } from '../../change-bounds';
+
+export interface ElementTrackingOptions {
+    /** Snap position. Default: true. */
+    snap: boolean | MouseEvent | KeyboardEvent | any;
+    /** Restrict position. Default: true */
+    restrict: boolean | MouseEvent | KeyboardEvent | any;
+    /** Validate operation. Default: true */
+    validate: boolean;
+
+    /** Skip operations that do not trigger change. Default: true */
+    skipStatic: boolean;
+}
+
+export interface MoveOptions extends ElementTrackingOptions {
+    /** Skip operations are invalid. Default: false */
+    skipInvalid: boolean;
+}
+
+export const DEFAULT_MOVE_OPTIONS: MoveOptions = {
+    snap: true,
+    restrict: true,
+    validate: true,
+
+    skipStatic: true,
+    skipInvalid: false
+};
+
+export type MoveableElements =
+    | MoveableElement[]
+    | {
+          ctx: GModelElement;
+          elementIDs: string[];
+          guard?: TypeGuard<MoveableElement>;
+      };
+
+export interface TrackedElementMove extends ResolvedElementMove {
+    moveVector: Vector;
+    sourceVector: Vector;
+    valid: boolean;
+}
+
+export type TypedElementMove<T extends MoveableElement> = TrackedElementMove & { element: T };
+
+export interface TrackedMove extends Movement {
+    elementMoves: TrackedElementMove[];
+    valid: boolean;
+    options: MoveOptions;
+}
+
+export namespace TrackedMove {
+    export function is(obj: any): obj is TrackedMove {
+        return Movement.is(obj) && hasBooleanProp(obj, 'valid');
+    }
+}
+
+export interface ResizeOptions extends ElementTrackingOptions {
+    /** Skip resizes that do not actually change the dimension of the element. Default: true. */
+    skipStatic: boolean;
+
+    /** Perform symmetric resize on the opposite side. Default: false. */
+    symmetric: boolean | MouseEvent | KeyboardEvent | any;
+
+    /**
+     * Avoids resizes smaller than the minimum size which will result in invalid sizes.
+     * Please note that the snapping will be applied before the constraining so an element may still be resized to an unsnapped size.
+     *
+     * Default: true.
+     */
+    constrainResize: boolean;
+
+    /** Skip resizes that produce an invalid size. Default: false. */
+    skipInvalidSize: boolean;
+
+    /** Skip resizes that produce an invalid move. Default: false. */
+    skipInvalidMove: boolean;
+}
+
+export const DEFAULT_RESIZE_OPTIONS: ResizeOptions = {
+    snap: true,
+    restrict: true,
+    validate: true,
+    symmetric: true,
+
+    constrainResize: true,
+
+    skipStatic: true,
+    skipInvalidSize: false,
+    skipInvalidMove: false
+};
+
+export interface TrackedHandleMove extends TypedElementMove<MoveableResizeHandle> {}
+
+export interface TrackedElementResize {
+    element: BoundsAwareModelElement;
+    fromBounds: Bounds;
+    toBounds: Bounds;
+    valid: {
+        size: boolean;
+        move: boolean;
+    };
+}
+
+export interface TrackedResize extends Movement {
+    handleMove: TrackedHandleMove;
+    elementResizes: TrackedElementResize[];
+    valid: {
+        size: boolean;
+        move: boolean;
+    };
+    options: ResizeOptions;
+}
+
+export class ChangeBoundsTracker {
+    protected diagramMovement: DiagramMovementCalculator;
+
+    constructor(readonly manager: ChangeBoundsManager) {
+        this.diagramMovement = new DiagramMovementCalculator(manager.positionTracker);
+    }
+
+    startTracking(): this {
+        this.diagramMovement.init();
+        return this;
+    }
+
+    updateTrackingPosition(param: Vector | Movement | TrackedMove): void {
+        const update = TrackedMove.is(param) ? Vector.max(...param.elementMoves.map(move => move.moveVector)) : param;
+        this.diagramMovement.updatePosition(update);
+    }
+
+    isTracking(): boolean {
+        return this.diagramMovement.hasPosition;
+    }
+
+    stopTracking(): this {
+        this.diagramMovement.dispose();
+        return this;
+    }
+
+    //
+    // MOVE
+    //
+
+    moveElements(elements: MoveableElements, opts?: Partial<MoveOptions>): TrackedMove {
+        const options = this.resolveMoveOptions(opts);
+        const update = this.calculateDiagramMovement();
+        const move: TrackedMove = { ...update, elementMoves: [], valid: true, options };
+
+        if (Vector.isZero(update.vector)) {
+            // no movement detected so elements won't be moved, exit early
+            return move;
+        }
+
+        // calculate move for each element
+        const elementsToMove = this.getMoveableElements(elements, options);
+        for (const element of elementsToMove) {
+            const elementMove = this.calculateElementMove(element, update.vector, options);
+            if (!this.skipElementMove(elementMove, options)) {
+                move.elementMoves.push(elementMove);
+                move.valid &&= elementMove.valid;
+            }
+        }
+        return move;
+    }
+
+    protected resolveMoveOptions(opts?: Partial<MoveOptions>): MoveOptions {
+        return {
+            ...DEFAULT_MOVE_OPTIONS,
+            ...opts,
+            snap: this.manager.usePositionSnap(opts?.snap ?? DEFAULT_MOVE_OPTIONS.snap),
+            restrict: this.manager.useMovementRestriction(opts?.restrict ?? DEFAULT_MOVE_OPTIONS.restrict)
+        };
+    }
+
+    protected calculateDiagramMovement(): Movement {
+        return this.diagramMovement.calculateMoveToCurrent();
+    }
+
+    protected getMoveableElements(elements: MoveableElements, options: MoveOptions): MoveableElement[] {
+        return Array.isArray(elements) ? elements : getElements(elements.ctx.index, elements.elementIDs, elements.guard ?? isMoveable);
+    }
+
+    protected skipElementMove(elementMove: TrackedElementMove, options: MoveOptions): boolean {
+        return (options.skipInvalid && !elementMove.valid) || (options.skipStatic && Vector.isZero(elementMove.moveVector));
+    }
+
+    protected calculateElementMove<T extends MoveableElement>(element: T, vector: Vector, options: MoveOptions): TypedElementMove<T> {
+        const fromPosition = element.position;
+        const toPosition = Point.add(fromPosition, vector);
+        const move: TypedElementMove<T> = { element, fromPosition, toPosition, valid: true, moveVector: vector, sourceVector: vector };
+
+        if (options.snap) {
+            move.toPosition = this.snapPosition(move, options);
+        }
+
+        if (options.restrict) {
+            move.toPosition = this.restrictMovement(move, options);
+        }
+
+        if (options.validate) {
+            move.valid = this.validateElementMove(move, options);
+        }
+
+        move.moveVector = Point.vector(move.fromPosition, move.toPosition);
+        return move;
+    }
+
+    protected snapPosition(elementMove: TrackedElementMove, opts: MoveOptions): Point {
+        return this.manager.snapPosition(elementMove.element, elementMove.toPosition);
+    }
+
+    protected restrictMovement(elementMove: TrackedElementMove, opts: MoveOptions): Point {
+        const movement = Point.move(elementMove.fromPosition, elementMove.toPosition);
+        return this.manager.restrictMovement(elementMove.element, movement).to;
+    }
+
+    protected validateElementMove(elementMove: TrackedElementMove, opts: MoveOptions): boolean {
+        return this.manager.hasValidPosition(elementMove.element, elementMove.toPosition);
+    }
+
+    //
+    // RESIZE
+    //
+
+    resizeElements(handle: SResizeHandle, opts?: Partial<ResizeOptions>): TrackedResize {
+        const options = this.resolveResizeOptions(opts);
+        const update = this.calculateDiagramMovement();
+        const handleMove = this.calculateHandleMove(new MoveableResizeHandle(handle), update.vector, options);
+        const resize: TrackedResize = { ...update, valid: { move: true, size: true }, options, handleMove, elementResizes: [] };
+        if (Vector.isZero(handleMove.moveVector)) {
+            // no movement detected so elements won't be moved, exit early
+            return resize;
+        }
+
+        // calculate resize for each element (typically only one element is resized at a time but customizations are possible)
+        const elementsToResize = this.getResizeableElements(handle, options);
+        for (const element of elementsToResize) {
+            const elementResize = this.calculateElementResize(element, handleMove, options);
+            if (!this.skipElementResize(elementResize, options)) {
+                resize.elementResizes.push(elementResize);
+                resize.valid.move = resize.valid.move && elementResize.valid.move;
+                resize.valid.size = resize.valid.size && elementResize.valid.size;
+            }
+        }
+        return resize;
+    }
+
+    protected resolveResizeOptions(opts?: Partial<ResizeOptions>): ResizeOptions {
+        return {
+            ...DEFAULT_RESIZE_OPTIONS,
+            ...opts,
+            snap: this.manager.usePositionSnap(opts?.snap ?? DEFAULT_RESIZE_OPTIONS.snap),
+            restrict: this.manager.useMovementRestriction(opts?.restrict ?? DEFAULT_RESIZE_OPTIONS.restrict),
+            symmetric: this.manager.useSymmetricResize(opts?.symmetric ?? DEFAULT_RESIZE_OPTIONS.symmetric)
+        };
+    }
+
+    protected calculateHandleMove(handle: MoveableResizeHandle, diagramMovement: Vector, opts?: Partial<ResizeOptions>): TrackedHandleMove {
+        const moveOptions = this.resolveMoveOptions({ ...opts, validate: false });
+        return this.calculateElementMove(handle, diagramMovement, moveOptions);
+    }
+
+    protected getResizeableElements(handle: SResizeHandle, options: ResizeOptions): ResizableModelElement[] {
+        return [handle.parent];
+    }
+
+    protected skipElementResize(elementResize: TrackedElementResize, options: ResizeOptions): boolean {
+        return (
+            (options.skipInvalidMove && !elementResize.valid.move) ||
+            (options.skipInvalidSize && !elementResize.valid.size) ||
+            (options.skipStatic && Dimension.equals(elementResize.fromBounds, elementResize.toBounds))
+        );
+    }
+
+    protected calculateElementResize(
+        element: ResizableModelElement,
+        handleMove: TrackedHandleMove,
+        options: ResizeOptions
+    ): TrackedElementResize {
+        const fromBounds = element.bounds;
+        const toBounds = this.calculateElementBounds(element, handleMove, options);
+        const resize: TrackedElementResize = { element, fromBounds, toBounds, valid: { size: true, move: true } };
+
+        if (options.validate) {
+            resize.valid.size = this.manager.hasValidSize(resize.element, resize.toBounds);
+            resize.valid.move = handleMove.valid && this.manager.hasValidPosition(resize.element, resize.toBounds);
+        }
+
+        return resize;
+    }
+
+    protected calculateElementBounds(element: ResizableModelElement, handleMove: TrackedHandleMove, options: ResizeOptions): Bounds {
+        let toBounds = this.calculateBounds(element.bounds, handleMove);
+        if (options.symmetric) {
+            const symmetricHandleMove = this.calculateSymmetricHandleMove(handleMove, options);
+            toBounds = this.calculateBounds(toBounds, symmetricHandleMove);
+        }
+        if (!options.constrainResize || this.manager.hasValidSize(element, toBounds)) {
+            return toBounds;
+        }
+
+        // we need to adjust to the minimum size but it is not enough to simply set the size
+        // we need to make sure that the element is still at the expected position
+        // we therefore constrain the movement vector to actually avoid going below the minimum size
+        const minimum = this.manager.getMinimumSize(element);
+        handleMove.moveVector = this.constrainResizeVector(element.bounds, handleMove, minimum);
+        if (options.symmetric) {
+            // if we have symmetric resize we want to distribute the constrained movement vector to both sides
+            // but only for the dimension that was actually resized beyond the minimum
+            handleMove.moveVector.x = element.bounds.width > minimum.width ? handleMove.moveVector.x / 2 : handleMove.moveVector.x;
+            handleMove.moveVector.y = element.bounds.height > minimum.height ? handleMove.moveVector.y / 2 : handleMove.moveVector.y;
+        }
+        toBounds = this.calculateBounds(element.bounds, handleMove);
+        if (options.symmetric) {
+            // since we already distributed the available movement vector, we do not want to snap the symmetric handle move
+            const symmetricHandleMove = this.calculateSymmetricHandleMove(handleMove, { ...options, snap: false });
+            toBounds = this.calculateBounds(toBounds, symmetricHandleMove);
+        }
+        return toBounds;
+    }
+
+    protected calculateSymmetricHandleMove(handleMove: TrackedHandleMove, options: ResizeOptions): TrackedHandleMove {
+        const moveOptions = this.resolveMoveOptions({ ...options, validate: false, restrict: false });
+        return this.calculateElementMove(handleMove.element.opposite(), Vector.reverse(handleMove.moveVector), moveOptions);
+    }
+
+    protected calculateBounds(src: Readonly<Bounds>, handleMove?: TrackedHandleMove): Bounds {
+        if (!handleMove || Vector.isZero(handleMove.moveVector)) {
+            return src;
+        }
+        return this.doCalculateBounds(src, handleMove.moveVector, handleMove.element.location);
+    }
+
+    protected doCalculateBounds(src: Readonly<Bounds>, vector: Vector, location: ResizeHandleLocation): Bounds {
+        switch (location) {
+            case ResizeHandleLocation.TopLeft:
+                return { x: src.x + vector.x, y: src.y + vector.y, width: src.width - vector.x, height: src.height - vector.y };
+            case ResizeHandleLocation.Top:
+                return { ...src, y: src.y + vector.y, height: src.height - vector.y };
+            case ResizeHandleLocation.TopRight:
+                return { ...src, y: src.y + vector.y, width: src.width + vector.x, height: src.height - vector.y };
+            case ResizeHandleLocation.Right:
+                return { ...src, width: src.width + vector.x };
+            case ResizeHandleLocation.BottomRight:
+                return { ...src, width: src.width + vector.x, height: src.height + vector.y };
+            case ResizeHandleLocation.Bottom:
+                return { ...src, height: src.height + vector.y };
+            case ResizeHandleLocation.BottomLeft:
+                return { ...src, x: src.x + vector.x, width: src.width - vector.x, height: src.height + vector.y };
+            case ResizeHandleLocation.Left:
+                return { ...src, x: src.x + vector.x, width: src.width - vector.x };
+        }
+    }
+
+    protected constrainResizeVector(src: Readonly<Bounds>, handleMove: TrackedHandleMove, minimum: Dimension): Vector {
+        const vector = handleMove.moveVector as Writable<Vector>;
+        switch (handleMove.element.location) {
+            case ResizeHandleLocation.TopLeft:
+                vector.x = src.width - vector.x < minimum.width ? src.width - minimum.width : vector.x;
+                vector.y = src.height - vector.y < minimum.height ? src.height - minimum.height : vector.y;
+                break;
+            case ResizeHandleLocation.Top:
+                vector.y = src.height - vector.y < minimum.height ? src.height - minimum.height : vector.y;
+                break;
+            case ResizeHandleLocation.TopRight:
+                vector.x = src.width + vector.x < minimum.width ? minimum.width - src.width : vector.x;
+                vector.y = src.height - vector.y < minimum.height ? src.height - minimum.height : vector.y;
+                break;
+            case ResizeHandleLocation.Right:
+                vector.x = src.width + vector.x < minimum.width ? minimum.width - src.width : vector.x;
+                break;
+            case ResizeHandleLocation.BottomRight:
+                vector.x = src.width + vector.x < minimum.width ? minimum.width - src.width : vector.x;
+                vector.y = src.height + vector.y < minimum.height ? minimum.height - src.height : vector.y;
+                break;
+            case ResizeHandleLocation.Bottom:
+                vector.y = src.height + vector.y < minimum.height ? minimum.height - src.height : vector.y;
+                break;
+            case ResizeHandleLocation.BottomLeft:
+                vector.x = src.width - vector.x < minimum.width ? src.width - minimum.width : vector.x;
+                vector.y = src.height + vector.y < minimum.height ? minimum.height - src.height : vector.y;
+                break;
+            case ResizeHandleLocation.Left:
+                vector.x = src.width - vector.x < minimum.width ? src.width - minimum.width : vector.x;
+                break;
+        }
+        return vector;
+    }
+
+    dispose(): void {
+        this.stopTracking();
+    }
+}
+
+export class MoveableResizeHandle extends SResizeHandle implements Locateable {
+    constructor(
+        protected handle: SResizeHandle,
+        override location: ResizeHandleLocation = handle.location,
+        readonly position = SResizeHandle.getHandlePosition(handle.parent, location)
+    ) {
+        super(location, handle.type, handle.hoverFeedback);
+        this.id = handle.id;
+        // this only acts as a wrapper so we do not actually add this to the parent but still want the parent reference
+        (this as any).parent = handle.parent;
+    }
+
+    opposite(): MoveableResizeHandle {
+        return new MoveableResizeHandle(this.handle, ResizeHandleLocation.opposite(this.location));
+    }
+}
+
+export class MoveableRoutingHandle extends GRoutingHandle implements Locateable {
+    constructor(
+        protected handle: GRoutingHandle,
+        readonly position: Point
+    ) {
+        super();
+        this.id = handle.id;
+        // this only acts as a wrapper so we do not actually add this to the parent but still want the parent reference
+        (this as any).parent = handle.parent;
+    }
+}

package/src/features/tools/change-bounds/index.ts

@@ -13,8 +13,10 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
+export * from './change-bounds-manager';
 export * from './change-bounds-tool';
 export * from './change-bounds-tool-feedback';
 export * from './change-bounds-tool-module';
 export * from './change-bounds-tool-move-feedback';
+export * from './change-bounds-tracker';
 export * from './view';

package/src/features/tools/change-bounds/view.tsx

@@ -16,7 +16,7 @@
 import { IView, Point, RenderingContext, setAttr, svg } from '@eclipse-glsp/sprotty';
 import { injectable } from 'inversify';
 import { VNode } from 'snabbdom';
-import { ResizeHandleLocation, SResizeHandle, isResizable } from '../../change-bounds/model';
+import { SResizeHandle } from '../../change-bounds/model';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const JSX = { createElement: svg };
@@ -46,19 +46,7 @@ export class SResizeHandleView implements IView {
     }
 
     protected getPosition(handle: SResizeHandle): Point | undefined {
-        const parent = handle.parent;
-        if (isResizable(parent)) {
-            if (handle.location === ResizeHandleLocation.TopLeft) {
-                return { x: 0, y: 0 };
-            } else if (handle.location === ResizeHandleLocation.TopRight) {
-                return { x: parent.bounds.width, y: 0 };
-            } else if (handle.location === ResizeHandleLocation.BottomLeft) {
-                return { x: 0, y: parent.bounds.height };
-            } else if (handle.location === ResizeHandleLocation.BottomRight) {
-                return { x: parent.bounds.width, y: parent.bounds.height };
-            }
-        }
-        return undefined;
+        return Point.subtract(SResizeHandle.getHandlePosition(handle), handle.parent.bounds);
     }
 
     getRadius(): number {

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

@@ -21,7 +21,6 @@ import {
     CommandReturn,
     Disposable,
     EdgeRouterRegistry,
-    ElementMove,
     GConnectableElement,
     GModelElement,
     GRoutingHandle,
@@ -37,17 +36,17 @@ import {
     hasStringProp,
     isBoundsAware,
     isConnectable,
-    isSelected
+    isSelected,
+    toTypeGuard,
+    typeGuard
 } from '@eclipse-glsp/sprotty';
 import { inject, injectable } from 'inversify';
+import { ChangeBoundsManager, ChangeBoundsTracker, MoveableRoutingHandle } from '..';
 import { FeedbackEmitter } from '../../../base';
 import { IFeedbackActionDispatcher } from '../../../base/feedback/feedback-action-dispatcher';
 import { FeedbackCommand } from '../../../base/feedback/feedback-command';
-import { forEachElement, isRoutable, isRoutingHandle } from '../../../utils/gmodel-util';
+import { forEachElement, getMatchingElements, isRoutable, isRoutingHandle } from '../../../utils/gmodel-util';
 import { getAbsolutePosition, toAbsoluteBounds } from '../../../utils/viewpoint-util';
-import { PointPositionUpdater } from '../../change-bounds/point-position-updater';
-import { PositionSnapper } from '../../change-bounds/position-snapper';
-import { useSnap } from '../../change-bounds/snap';
 import { addReconnectHandles, removeReconnectHandles } from '../../reconnect/model';
 import { FeedbackEdgeEnd, feedbackEdgeEndId, feedbackEdgeId } from '../edge-creation/dangling-edge-feedback';
 import { FeedbackEdgeEndMovingMouseListener } from '../edge-creation/edge-creation-tool-feedback';
@@ -255,14 +254,14 @@ export class FeedbackEdgeSourceMovingMouseListener extends MouseListener impleme
 }
 
 export class FeedbackEdgeRouteMovingMouseListener extends MouseListener {
-    protected pointPositionUpdater: PointPositionUpdater;
+    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[] {
@@ -271,64 +270,47 @@ export class FeedbackEdgeRouteMovingMouseListener extends MouseListener {
             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[] = [];
+        super.mouseMove(target, event);
         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 })];
+        } else 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 {
@@ -345,7 +327,7 @@ export class FeedbackEdgeRouteMovingMouseListener extends MouseListener {
     }
 
     override mouseUp(_target: GModelElement, _event: MouseEvent): Action[] {
-        this.pointPositionUpdater.resetPosition();
+        this.tracker.dispose();
         return [];
     }
 }

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

@@ -24,18 +24,19 @@ import {
     GRoutableElement,
     GRoutingHandle,
     ReconnectEdgeOperation,
+    TYPES,
     canEditRouting,
     findParentByFeature,
     isConnectable,
     isSelected
 } from '@eclipse-glsp/sprotty';
 import { inject, injectable, optional } from 'inversify';
+import { ChangeBoundsManager } from '..';
 import { FeedbackEmitter } from '../../../base';
 import { DragAwareMouseListener } from '../../../base/drag-aware-mouse-listener';
 import { CursorCSS, cursorFeedbackAction } from '../../../base/feedback/css-feedback';
 import { ISelectionListener, SelectionService } from '../../../base/selection-service';
 import { calcElementAndRoutingPoints, isRoutable, isRoutingHandle } from '../../../utils/gmodel-util';
-import { PositionSnapper } from '../../change-bounds/position-snapper';
 import { GReconnectHandle, isReconnectHandle, isReconnectable, isSourceRoutingHandle, isTargetRoutingHandle } from '../../reconnect/model';
 import { BaseEditTool } from '../base-tools';
 import { DrawFeedbackEdgeAction, RemoveFeedbackEdgeAction, feedbackEdgeId } from '../edge-creation/dangling-edge-feedback';
@@ -56,7 +57,7 @@ export class EdgeEditTool extends BaseEditTool {
     @inject(SelectionService) protected selectionService: SelectionService;
     @inject(AnchorComputerRegistry) protected anchorRegistry: AnchorComputerRegistry;
     @inject(EdgeRouterRegistry) @optional() readonly edgeRouterRegistry?: EdgeRouterRegistry;
-    @inject(PositionSnapper) readonly positionSnapper: PositionSnapper;
+    @inject(TYPES.IChangeBoundsManager) readonly changeBoundsManager: ChangeBoundsManager;
 
     protected feedbackEdgeSourceMovingListener: FeedbackEdgeSourceMovingMouseListener;
     protected feedbackEdgeTargetMovingListener: FeedbackEdgeTargetMovingMouseListener;
@@ -73,7 +74,7 @@ export class EdgeEditTool extends BaseEditTool {
         // install feedback move mouse listener for client-side move updates
         this.feedbackEdgeSourceMovingListener = new FeedbackEdgeSourceMovingMouseListener(this.anchorRegistry, this.feedbackDispatcher);
         this.feedbackEdgeTargetMovingListener = new FeedbackEdgeTargetMovingMouseListener(this.anchorRegistry, this.feedbackDispatcher);
-        this.feedbackMovingListener = new FeedbackEdgeRouteMovingMouseListener(this.positionSnapper, this.edgeRouterRegistry);
+        this.feedbackMovingListener = new FeedbackEdgeRouteMovingMouseListener(this.changeBoundsManager, this.edgeRouterRegistry);
 
         this.toDisposeOnDisable.push(
             this.edgeEditListener,