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

package/src/features/bounds/local-bounds.ts

@@ -31,6 +31,7 @@ import {
 } from '@eclipse-glsp/sprotty';
 import { inject, injectable } from 'inversify';
 import { ServerAction } from '../../base/model/glsp-model-source';
+import { LayoutAware } from './layout-data';
 
 export interface LocalRequestBoundsAction extends RequestBoundsAction {
     elementIDs?: string[];
@@ -41,9 +42,11 @@ export namespace LocalRequestBoundsAction {
         return RequestBoundsAction.is(object) && !ServerAction.is(object) && hasArrayProp(object, 'elementIDs', true);
     }
 
-    export function create(newRoot: GModelRootSchema, elementIDs?: string[]): LocalRequestBoundsAction {
+    export function create(newRoot: GModelRoot, elementIDs?: string[]): LocalRequestBoundsAction;
+    export function create(newRoot: GModelRootSchema, elementIDs?: string[]): LocalRequestBoundsAction;
+    export function create(newRoot: GModelRoot | GModelRootSchema, elementIDs?: string[]): LocalRequestBoundsAction {
         return {
-            ...RequestBoundsAction.create(newRoot),
+            ...RequestBoundsAction.create(newRoot as unknown as GModelRootSchema),
             elementIDs
         };
     }
@@ -55,7 +58,7 @@ export namespace LocalRequestBoundsAction {
         elementIDs?: string[]
     ): CommandResult {
         // do not modify the main model (modelChanged = false) but request local bounds calculation on hidden model
-        actionDispatcher.dispatch(LocalRequestBoundsAction.create(root as unknown as GModelRootSchema, elementIDs));
+        actionDispatcher.dispatch(LocalRequestBoundsAction.create(root, elementIDs));
         return {
             model: root,
             modelChanged: false,
@@ -65,7 +68,7 @@ export namespace LocalRequestBoundsAction {
 }
 
 export namespace LocalComputedBoundsAction {
-    export function is(object: unknown): object is RequestBoundsAction {
+    export function is(object: unknown): object is ComputedBoundsAction & ServerAction {
         return ComputedBoundsAction.is(object) && ServerAction.is(object);
     }
 
@@ -94,9 +97,22 @@ export class LocalComputedBoundsCommand extends Command {
             }
             // apply computed bounds from the hidden model and return updated model to render new main model
             this.computedBoundsApplicator.apply(context.root as unknown as GModelRootSchema, this.action);
+            this.action.layoutData?.forEach(({ elementId, layoutData }) => {
+                const element = context.root.index.getById(elementId);
+                if (element !== undefined) {
+                    LayoutAware.setLayoutData(element, layoutData);
+                }
+            });
             return context.root;
         }
 
+        this.action.layoutData?.forEach(({ elementId, layoutData }) => {
+            const element = context.root.index.getById(elementId);
+            if (element !== undefined) {
+                LayoutAware.setLayoutData(element, layoutData);
+            }
+        });
+
         // computed bounds action from server -> we do not care and do not trigger any update of the main model
         return {
             model: context.root,

package/src/features/bounds/vbox-layout.ts

@@ -13,22 +13,23 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-import { injectable } from 'inversify';
 import {
     Bounds,
     BoundsData,
     Dimension,
     GChildElement,
-    LayoutContainer,
-    Point,
     GModelElement,
     GParentElement,
+    LayoutContainer,
+    Point,
     StatefulLayouter,
     VBoxLayoutOptions,
     VBoxLayouter,
     isBoundsAware,
     isLayoutableChild
 } from '@eclipse-glsp/sprotty';
+import { injectable } from 'inversify';
+import { LayoutAware } from './layout-data';
 
 export interface VBoxLayoutOptionsExt extends VBoxLayoutOptions {
     hGrab: boolean;
@@ -79,7 +80,9 @@ export class VBoxLayouterExt extends VBoxLayouter {
 
         if (maxWidth > 0 && maxHeight > 0) {
             const offset = this.layoutChildren(container, layouter, options, width, height, grabHeight, grabbingChildren);
-            boundsData.bounds = this.getFinalContainerBounds(container, offset, options, childrenSize.width, childrenSize.height);
+            const computed = this.getComputedContainerDimensions(options, childrenSize.width, childrenSize.height);
+            LayoutAware.setComputedDimensions(boundsData, computed);
+            boundsData.bounds = this.getFinalContainerBounds(container, offset, options, computed.width, computed.height);
             boundsData.boundsChanged = true;
         }
     }
@@ -223,24 +226,29 @@ export class VBoxLayouterExt extends VBoxLayouter {
         return (element as any).layoutOptions;
     }
 
+    protected getComputedContainerDimensions(options: VBoxLayoutOptionsExt, maxWidth: number, maxHeight: number): Dimension {
+        return {
+            width: maxWidth + options.paddingLeft + options.paddingRight,
+            height: maxHeight + options.paddingTop + options.paddingBottom
+        };
+    }
+
     protected override getFinalContainerBounds(
         container: GParentElement & LayoutContainer,
         lastOffset: Point,
         options: VBoxLayoutOptionsExt,
-        maxWidth: number,
-        maxHeight: number
+        computedWidth: number,
+        computedHeight: number
     ): Bounds {
         const elementOptions = this.getElementLayoutOptions(container);
         const width = elementOptions?.prefWidth ?? options.minWidth;
         const height = elementOptions?.prefHeight ?? options.minHeight;
-
         const result = {
             x: container.bounds.x,
             y: container.bounds.y,
-            width: Math.max(width, maxWidth + options.paddingLeft + options.paddingRight),
-            height: Math.max(height, maxHeight + options.paddingTop + options.paddingBottom)
+            width: Math.max(width, computedWidth),
+            height: Math.max(height, computedHeight)
         };
-
         return result;
     }
 

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

@@ -18,3 +18,4 @@ export * from './movement-restrictor';
 export * from './point-position-updater';
 export * from './position-snapper';
 export * from './snap';
+export * from './tracker';

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

@@ -14,15 +14,18 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 import {
+    Bounds,
     GChildElement,
     GModelElement,
     GParentElement,
     Hoverable,
+    Point,
     hoverFeedbackFeature,
     isBoundsAware,
     isMoveable,
     isSelectable
 } from '@eclipse-glsp/sprotty';
+import { CursorCSS } from '../../base';
 import { BoundsAwareModelElement, MoveableElement, ResizableModelElement } from '../../utils';
 
 export const resizeFeature = Symbol('resizeFeature');
@@ -34,9 +37,36 @@ export function isResizable(element: GModelElement): element is ResizableModelEl
 // eslint-disable-next-line no-shadow
 export enum ResizeHandleLocation {
     TopLeft = 'top-left',
+    Top = 'top',
     TopRight = 'top-right',
+    Right = 'right',
+    BottomRight = 'bottom-right',
+    Bottom = 'bottom',
     BottomLeft = 'bottom-left',
-    BottomRight = 'bottom-right'
+    Left = 'left'
+}
+
+export namespace ResizeHandleLocation {
+    export function opposite(location: ResizeHandleLocation): ResizeHandleLocation {
+        switch (location) {
+            case ResizeHandleLocation.TopLeft:
+                return ResizeHandleLocation.BottomRight;
+            case ResizeHandleLocation.Top:
+                return ResizeHandleLocation.Bottom;
+            case ResizeHandleLocation.TopRight:
+                return ResizeHandleLocation.BottomLeft;
+            case ResizeHandleLocation.Right:
+                return ResizeHandleLocation.Left;
+            case ResizeHandleLocation.BottomRight:
+                return ResizeHandleLocation.TopLeft;
+            case ResizeHandleLocation.Bottom:
+                return ResizeHandleLocation.Top;
+            case ResizeHandleLocation.BottomLeft:
+                return ResizeHandleLocation.TopRight;
+            case ResizeHandleLocation.Left:
+                return ResizeHandleLocation.Right;
+        }
+    }
 }
 
 export function isBoundsAwareMoveable(element: GModelElement): element is BoundsAwareModelElement & MoveableElement {
@@ -64,18 +94,34 @@ export class SResizeHandle extends GChildElement implements Hoverable {
         return this.location === ResizeHandleLocation.TopLeft;
     }
 
-    isSeResize(): boolean {
-        return this.location === ResizeHandleLocation.BottomRight;
+    isNResize(): boolean {
+        return this.location === ResizeHandleLocation.Top;
     }
 
     isNeResize(): boolean {
         return this.location === ResizeHandleLocation.TopRight;
     }
 
+    isEResize(): boolean {
+        return this.location === ResizeHandleLocation.Right;
+    }
+
+    isSeResize(): boolean {
+        return this.location === ResizeHandleLocation.BottomRight;
+    }
+
+    isSResize(): boolean {
+        return this.location === ResizeHandleLocation.Bottom;
+    }
+
     isSwResize(): boolean {
         return this.location === ResizeHandleLocation.BottomLeft;
     }
 
+    isWResize(): boolean {
+        return this.location === ResizeHandleLocation.Left;
+    }
+
     isNwSeResize(): boolean {
         return this.isNwResize() || this.isSeResize();
     }
@@ -83,18 +129,72 @@ export class SResizeHandle extends GChildElement implements Hoverable {
     isNeSwResize(): boolean {
         return this.isNeResize() || this.isSwResize();
     }
+
+    static getHandlePosition(handle: SResizeHandle): Point;
+    static getHandlePosition(parent: ResizableModelElement, location: ResizeHandleLocation): Point;
+    static getHandlePosition(bounds: Bounds, location: ResizeHandleLocation): Point;
+    static getHandlePosition(first: ResizableModelElement | SResizeHandle | Bounds, second?: ResizeHandleLocation): Point {
+        const bounds = SResizeHandle.is(first) ? first.parent.bounds : first instanceof GModelElement ? first.bounds : first;
+        const location = SResizeHandle.is(first) ? first.location : second!;
+        switch (location) {
+            case ResizeHandleLocation.TopLeft:
+                return Bounds.topLeft(bounds);
+            case ResizeHandleLocation.Top:
+                return Bounds.topCenter(bounds);
+            case ResizeHandleLocation.TopRight:
+                return Bounds.topRight(bounds);
+            case ResizeHandleLocation.Right:
+                return Bounds.middleRight(bounds);
+            case ResizeHandleLocation.BottomRight:
+                return Bounds.bottomRight(bounds);
+            case ResizeHandleLocation.Bottom:
+                return Bounds.bottomCenter(bounds);
+            case ResizeHandleLocation.BottomLeft:
+                return Bounds.bottomLeft(bounds);
+            case ResizeHandleLocation.Left:
+                return Bounds.middleLeft(bounds);
+        }
+    }
+
+    static getCursorCss(handle: SResizeHandle): string {
+        switch (handle.location) {
+            case ResizeHandleLocation.TopLeft:
+                return CursorCSS.RESIZE_NW;
+            case ResizeHandleLocation.Top:
+                return CursorCSS.RESIZE_N;
+            case ResizeHandleLocation.TopRight:
+                return CursorCSS.RESIZE_NE;
+            case ResizeHandleLocation.Right:
+                return CursorCSS.RESIZE_E;
+            case ResizeHandleLocation.BottomRight:
+                return CursorCSS.RESIZE_SE;
+            case ResizeHandleLocation.Bottom:
+                return CursorCSS.RESIZE_S;
+            case ResizeHandleLocation.BottomLeft:
+                return CursorCSS.RESIZE_SW;
+            case ResizeHandleLocation.Left:
+                return CursorCSS.RESIZE_W;
+        }
+    }
+
+    static is(handle: unknown): handle is SResizeHandle {
+        return typeof handle === 'object' && !!handle && 'type' in handle && handle.type === SResizeHandle.TYPE;
+    }
 }
 
 export function addResizeHandles(
     element: ResizableModelElement,
     locations: ResizeHandleLocation[] = [
         ResizeHandleLocation.TopLeft,
-        ResizeHandleLocation.TopRight,
+        ResizeHandleLocation.Top,
         ResizeHandleLocation.BottomLeft,
         ResizeHandleLocation.BottomRight
     ]
 ): void {
     for (const location of Object.values(ResizeHandleLocation)) {
+        if (typeof location === 'function') {
+            continue;
+        }
         const existing = element.children.find(child => child instanceof SResizeHandle && child.location === location);
         if (locations.includes(location) && !existing) {
             // add missing handle

package/src/features/change-bounds/movement-restrictor.ts

@@ -108,3 +108,13 @@ export function removeMovementRestrictionFeedback(
 
     return ModifyCSSFeedbackAction.create({ elements, remove: movementRestrictor.cssClasses });
 }
+
+export function movementRestrictionFeedback(
+    element: GModelElement,
+    movementRestrictor: IMovementRestrictor,
+    valid: boolean
+): ModifyCSSFeedbackAction {
+    return valid
+        ? removeMovementRestrictionFeedback(element, movementRestrictor)
+        : createMovementRestrictionFeedback(element, movementRestrictor);
+}

package/src/features/change-bounds/point-position-updater.spec.ts

@@ -13,6 +13,8 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
+/* eslint-disable import/no-deprecated */
+/* eslint-disable deprecation/deprecation */
 
 import { GModelElement } from '@eclipse-glsp/sprotty';
 import { expect } from 'chai';

package/src/features/change-bounds/point-position-updater.ts

@@ -14,6 +14,9 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 /* eslint-disable @typescript-eslint/no-shadow */
+/* eslint-disable import/no-deprecated */
+/* eslint-disable deprecation/deprecation */
+
 import { GModelElement, ISnapper, Point, Writable } from '@eclipse-glsp/sprotty';
 import { calculateDeltaBetweenPoints } from '../../utils/gmodel-util';
 import { isMouseEvent } from '../../utils/html-utils';
@@ -29,6 +32,9 @@ import { useSnap } from './snap';
  *
  * You can initialize a this class with a optional {@link ISnapper}. If a
  * snapper is present, the positions will be snapped to the defined grid.
+ *
+ * @deprecated The use of this class is discouraged. Use the {@link ChangeBoundsManager.createTracker}
+ * instead which centralized a few aspects of the tracking.
  */
 export class PointPositionUpdater {
     protected positionSnapper: PositionSnapper;

package/src/features/change-bounds/position-snapper.ts

@@ -18,6 +18,10 @@ import { inject, injectable, optional } from 'inversify';
 import { IHelperLineManager } from '../helper-lines/helper-line-manager';
 import { Direction, HelperLine, isHelperLine } from '../helper-lines/model';
 
+/**
+ * @deprecated The use of this class is discouraged. Use the {@link ChangeBoundsManager.createTracker}
+ * instead which centralized a few aspects of the tracking.
+ */
 @injectable()
 export class PositionSnapper {
     constructor(

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

@@ -16,10 +16,16 @@
 /* eslint-disable @typescript-eslint/no-shadow */
 import { KeyboardModifier } from '@eclipse-glsp/sprotty';
 
+/**
+ * @deprecated Use {@link ChangeBoundsManager.useSnap} instead which may be customized.
+ */
 export function useSnap(event: MouseEvent | KeyboardEvent): boolean {
     return !event.shiftKey;
 }
 
+/**
+ * @deprecated Use {@link ChangeBoundsManager.unsnapModifier} instead which may be customized.
+ */
 export function unsnapModifier(): KeyboardModifier {
     return 'shift';
 }

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

@@ -0,0 +1,63 @@
+/********************************************************************************
+ * Copyright (c) 2024 Axon Ivy AG 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 { Disposable, MousePositionTracker, Movement, Point, Vector } from '@eclipse-glsp/sprotty';
+
+export class MovementCalculator implements Disposable {
+    protected position?: Point;
+
+    setPosition(position: Point): void {
+        this.position = { ...position };
+    }
+
+    updatePosition(param: Vector | Movement): void {
+        const vector = Vector.is(param) ? param : param.vector;
+        this.setPosition(Point.add(this.position ?? Point.ORIGIN, vector));
+    }
+
+    get hasPosition(): boolean {
+        return this.position !== undefined;
+    }
+
+    calculateMoveTo(targetPosition: Point): Movement {
+        return !this.position ? Movement.ZERO : Point.move(this.position, targetPosition);
+    }
+
+    dispose(): void {
+        this.position = undefined;
+    }
+}
+
+export class DiagramMovementCalculator extends MovementCalculator {
+    constructor(readonly positionTracker: MousePositionTracker) {
+        super();
+    }
+
+    init(): void {
+        const position = this.positionTracker.lastPositionOnDiagram;
+        if (position) {
+            this.setPosition(position);
+        }
+    }
+
+    calculateMoveToCurrent(): Movement {
+        const targetPosition = this.positionTracker.lastPositionOnDiagram;
+        return targetPosition ? this.calculateMoveTo(targetPosition) : Movement.ZERO;
+    }
+
+    reset(): void {
+        this.dispose();
+    }
+}

package/src/features/debug/debug-bounds-decorator.tsx

@@ -15,7 +15,7 @@
  ********************************************************************************/
 /* eslint-disable max-len */
 
-import { Bounds, GModelElement, IVNodePostprocessor, Point, TYPES, isBoundsAware, setClass, svg } from '@eclipse-glsp/sprotty';
+import { Bounds, GModelElement, IVNodePostprocessor, Point, TYPES, isDecoration, isSizeable, setClass, svg } from '@eclipse-glsp/sprotty';
 import { inject, injectable, optional } from 'inversify';
 import { VNode } from 'snabbdom';
 import { GGraph } from '../../model';
@@ -25,6 +25,8 @@ import { DebugManager } from './debug-manager';
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const JSX = { createElement: svg };
 
+export const CSS_DEBUG_BOUNDS = 'debug-bounds';
+
 @injectable()
 export class DebugBoundsDecorator implements IVNodePostprocessor {
     @inject(TYPES.IDebugManager) @optional() protected debugManager?: DebugManager;
@@ -33,10 +35,10 @@ export class DebugBoundsDecorator implements IVNodePostprocessor {
         if (!this.debugManager?.isDebugEnabled) {
             return vnode;
         }
-        if (isBoundsAware(element)) {
-            this.decorateBoundsAware(vnode, element);
+        if (isSizeable(element) && this.shouldDecorateSizeable(element)) {
+            this.decorateSizeable(vnode, element);
         }
-        if (element instanceof GGraph) {
+        if (element instanceof GGraph && this.shouldDecorateGraph(element)) {
             this.decorateGraph(vnode, element);
         }
         return vnode;
@@ -48,8 +50,12 @@ export class DebugBoundsDecorator implements IVNodePostprocessor {
         return 5;
     }
 
+    protected shouldDecorateGraph(graph: GGraph): boolean {
+        return true;
+    }
+
     protected decorateGraph(vnode: VNode, graph: GGraph): void {
-        setClass(vnode, 'debug-bounds', true);
+        setClass(vnode, CSS_DEBUG_BOUNDS, true);
         const svgChild = vnode.children?.find(child => typeof child !== 'string' && child.sel === 'svg') as VNode | undefined;
         const group = svgChild?.children?.find(child => typeof child !== 'string' && child.sel === 'g') as VNode | undefined;
         group?.children?.push(this.renderOrigin(graph));
@@ -67,8 +73,12 @@ export class DebugBoundsDecorator implements IVNodePostprocessor {
         );
     }
 
-    protected decorateBoundsAware(vnode: VNode, element: BoundsAwareModelElement): void {
-        setClass(vnode, 'debug-bounds', true);
+    protected shouldDecorateSizeable(element: BoundsAwareModelElement): boolean {
+        return !isDecoration(element);
+    }
+
+    protected decorateSizeable(vnode: VNode, element: BoundsAwareModelElement): void {
+        setClass(vnode, CSS_DEBUG_BOUNDS, true);
         vnode.children?.push(this.renderTopLeftCorner(element));
         vnode.children?.push(this.renderTopRightCorner(element));
         vnode.children?.push(this.renderBottomLeftCorner(element));

package/src/features/element-template/mouse-tracking-element-position-listener.ts

@@ -14,55 +14,27 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 
-import {
-    Action,
-    Dimension,
-    Disposable,
-    ElementMove,
-    GModelElement,
-    MoveAction,
-    Point,
-    isBoundsAware,
-    isMoveable
-} from '@eclipse-glsp/sprotty';
-import { injectable } from 'inversify';
+import { Action, Dimension, GModelElement, MoveAction, Point, isBoundsAware, isMoveable } from '@eclipse-glsp/sprotty';
 import { DragAwareMouseListener } from '../../base/drag-aware-mouse-listener';
 import { CSS_HIDDEN, ModifyCSSFeedbackAction } from '../../base/feedback/css-feedback';
 import { FeedbackEmitter } from '../../base/feedback/feeback-emitter';
-import { IFeedbackEmitter } from '../../base/feedback/feedback-action-dispatcher';
-import { Tool } from '../../base/tool-manager/tool';
-import { MoveableElement } from '../../utils';
-import { getAbsolutePosition } from '../../utils/viewpoint-util';
+import { MoveableElement, getAbsolutePosition } from '../../utils';
 import {
-    IMovementRestrictor,
-    createMovementRestrictionFeedback,
-    removeMovementRestrictionFeedback
-} from '../change-bounds/movement-restrictor';
-import { PointPositionUpdater } from '../change-bounds/point-position-updater';
-import { PositionSnapper } from '../change-bounds/position-snapper';
-import { useSnap } from '../change-bounds/snap';
-import { MoveFinishedEventAction } from '../tools';
-
-export interface PositioningTool extends Tool {
-    readonly positionSnapper: PositionSnapper;
-    readonly movementRestrictor?: IMovementRestrictor;
+    CSS_RESIZE_MODE,
+    ChangeBoundsManager,
+    ChangeBoundsTracker,
+    FeedbackAwareTool,
+    MoveFinishedEventAction,
+    TrackedElementMove
+} from '../tools';
 
-    createFeedbackEmitter(): FeedbackEmitter;
-    /**
-     * @deprecated It is recommended to create a {@link createFeedbackEmitter dedicated emitter} per feedback instead of using the tool.
-     */
-    registerFeedback(feedbackActions: Action[], feedbackEmitter?: IFeedbackEmitter, cleanupActions?: Action[]): Disposable;
-    /**
-     * @deprecated It is recommended to create a {@link createFeedbackEmitter dedicated emitter} per feedback and dispose it like that.
-     */
-    deregisterFeedback(feedbackEmitter?: IFeedbackEmitter, cleanupActions?: Action[]): void;
+export interface PositioningTool extends FeedbackAwareTool {
+    readonly changeBoundsManager: ChangeBoundsManager;
 }
 
-@injectable()
 export class MouseTrackingElementPositionListener extends DragAwareMouseListener {
-    protected positionUpdater: PointPositionUpdater;
     protected moveGhostFeedback: FeedbackEmitter;
-    protected currentPosition?: Point;
+    protected tracker: ChangeBoundsTracker;
 
     constructor(
         protected elementId: string,
@@ -70,54 +42,60 @@ export class MouseTrackingElementPositionListener extends DragAwareMouseListener
         protected cursorPosition: 'top-left' | 'middle' = 'top-left'
     ) {
         super();
-        this.positionUpdater = new PointPositionUpdater(this.tool.positionSnapper);
+        this.tracker = this.tool.changeBoundsManager.createTracker();
         this.moveGhostFeedback = this.tool.createFeedbackEmitter();
     }
 
+    protected getTrackedElement(target: GModelElement, event: MouseEvent): MoveableElement | undefined {
+        const element = target.root.index.getById(this.elementId);
+        return !element || !isMoveable(element) ? undefined : element;
+    }
+
     override mouseMove(target: GModelElement, event: MouseEvent): Action[] {
         super.mouseMove(target, event);
-        const element = target.root.index.getById(this.elementId);
-        if (!element || !isMoveable(element)) {
+        const element = this.getTrackedElement(target, event);
+        if (!element) {
             return [];
         }
-        if (this.positionUpdater.isLastDragPositionUndefined()) {
-            this.positionUpdater.updateLastDragPosition(element.position);
+        if (!this.tracker.isTracking()) {
+            this.initialize(element, target, event);
         }
-        const mousePosition = getAbsolutePosition(target, event);
-        const delta = this.positionUpdater.updatePosition(element, mousePosition, useSnap(event));
-        if (!delta) {
+        const move = this.tracker.moveElements([element], { snap: event, restrict: event, validate: true });
+        const elementMove = move.elementMoves[0];
+        if (!elementMove) {
             return [];
         }
-        const toPosition = this.getElementTargetPosition(mousePosition, element, event);
-        const elementMove = { elementId: element.id, toPosition: toPosition };
-        this.addMoveFeeback(element, elementMove);
-        this.currentPosition = toPosition;
         // since we are moving a ghost element that is feedback-only and will be removed anyway,
         // we just send a MoveFinishedEventAction instead of reseting the position with a MoveAction and the finished flag set to true.
-        this.moveGhostFeedback.add(MoveAction.create([elementMove], { animate: false }), MoveFinishedEventAction.create()).submit();
+        this.moveGhostFeedback.add(
+            MoveAction.create([{ elementId: this.elementId, toPosition: elementMove.toPosition }], { animate: false }),
+            MoveFinishedEventAction.create()
+        );
+        this.addMoveFeeback(elementMove);
+        this.moveGhostFeedback.submit();
+        this.tracker.updateTrackingPosition(elementMove.moveVector);
         return [];
     }
 
-    protected getElementTargetPosition(mousePosition: Point, element: MoveableElement, event: MouseEvent): Point {
-        const unsnappedPosition =
-            this.cursorPosition === 'middle' && isBoundsAware(element)
-                ? Point.subtract(mousePosition, Dimension.center(element.bounds))
-                : mousePosition;
-        return this.tool.positionSnapper.snapPosition(unsnappedPosition, element, useSnap(event));
+    protected initialize(element: MoveableElement, target: GModelElement, event: MouseEvent): void {
+        this.tracker.startTracking();
+        element.position = this.initializeElementPosition(element, target, event);
     }
 
-    protected addMoveFeeback(element: MoveableElement, elementMove: ElementMove): void {
-        if (this.tool.movementRestrictor) {
-            if (!this.tool.movementRestrictor.validate(element, elementMove.toPosition)) {
-                this.moveGhostFeedback.add(
-                    createMovementRestrictionFeedback(element, this.tool.movementRestrictor),
-                    removeMovementRestrictionFeedback(element, this.tool.movementRestrictor)
-                );
-            } else {
-                this.moveGhostFeedback.add(removeMovementRestrictionFeedback(element, this.tool.movementRestrictor));
-            }
-        }
-        this.moveGhostFeedback.add(ModifyCSSFeedbackAction.create({ elements: [element.id], remove: [CSS_HIDDEN] }));
+    protected initializeElementPosition(element: MoveableElement, target: GModelElement, event: MouseEvent): Point {
+        const mousePosition = getAbsolutePosition(target, event);
+        return this.cursorPosition === 'middle' && isBoundsAware(element)
+            ? Point.subtract(mousePosition, Dimension.center(element.bounds))
+            : mousePosition;
+    }
+
+    protected addMoveFeeback(move: TrackedElementMove): void {
+        this.tool.changeBoundsManager.addRestrictionFeedback(this.moveGhostFeedback, move);
+        this.moveGhostFeedback.add(ModifyCSSFeedbackAction.create({ elements: [move.element.id], remove: [CSS_HIDDEN] }));
+        this.moveGhostFeedback.add(
+            ModifyCSSFeedbackAction.create({ add: [CSS_RESIZE_MODE] }),
+            ModifyCSSFeedbackAction.create({ remove: [CSS_RESIZE_MODE] })
+        );
     }
 
     override dispose(): void {