Use feedback dispatcher for change bounds feedback

packages/client/src/features/tool-feedback/change-bounds-tool-feedback.ts

@@ -19,6 +19,7 @@ import {
     Action,
     CommandExecutionContext,
     CommandReturn,
+    Disposable,
     ElementMove,
     MouseListener,
     MoveAction,
@@ -118,9 +119,10 @@ export class HideChangeBoundsToolResizeFeedbackCommand extends FeedbackCommand {
  * the visual feedback but also the basis for sending the change to the server
  * (see also `tools/MoveTool`).
  */
-export class FeedbackMoveMouseListener extends MouseListener {
+export class FeedbackMoveMouseListener extends MouseListener implements Disposable {
     protected hasDragged = false;
-    protected startDragPosition: Point | undefined;
+    protected rootElement?: SModelRoot;
+    protected startDragPosition?: Point;
     protected elementId2startPos = new Map<string, Point>();
 
     constructor(protected tool: ChangeBoundsTool) {
@@ -155,10 +157,12 @@ export class FeedbackMoveMouseListener extends MouseListener {
                 result.push(cursorFeedbackAction(CursorCSS.MOVE));
             }
         }
-        return result;
+        this.tool.dispatchFeedback(result, this);
+        return [];
     }
 
     protected collectStartPositions(root: SModelRoot): void {
+        this.rootElement = root;
         const selectedElements = root.index.all().filter(element => isSelectable(element) && element.selected);
         const elementsSet = new Set(selectedElements);
         selectedElements
@@ -184,13 +188,29 @@ export class FeedbackMoveMouseListener extends MouseListener {
         if (!this.startDragPosition) {
             return undefined;
         }
-        const elementMoves: ElementMove[] = [];
+
         const viewport = findParentByFeature(target, isViewport);
         const zoom = viewport ? viewport.zoom : 1;
         const delta = {
             x: (event.pageX - this.startDragPosition.x) / zoom,
             y: (event.pageY - this.startDragPosition.y) / zoom
         };
+
+        const elementMoves: ElementMove[] = this.getElementMovesForDelta(target, delta, !event.shiftKey, finished);
+        if (elementMoves.length > 0) {
+            return MoveAction.create(elementMoves, { animate: false, finished });
+        } else {
+            return undefined;
+        }
+    }
+
+    protected getElementMovesForDelta(
+        target: SModelElement,
+        delta: { x: number; y: number },
+        isSnap: boolean,
+        finished: boolean
+    ): ElementMove[] {
+        const elementMoves: ElementMove[] = [];
         this.elementId2startPos.forEach((startPosition, elementId) => {
             const element = target.root.index.getById(elementId);
             if (element) {
@@ -200,7 +220,7 @@ export class FeedbackMoveMouseListener extends MouseListener {
                         y: startPosition.y + delta.y
                     },
                     element,
-                    !event.shiftKey
+                    isSnap
                 );
 
                 if (isMoveable(element)) {
@@ -216,11 +236,7 @@ export class FeedbackMoveMouseListener extends MouseListener {
                 }
             }
         });
-        if (elementMoves.length > 0) {
-            return MoveAction.create(elementMoves, { animate: false, finished });
-        } else {
-            return undefined;
-        }
+        return elementMoves;
     }
 
     protected validateMove(startPosition: Point, toPosition: Point, element: SModelElement, isFinished: boolean): Point {
@@ -237,7 +253,6 @@ export class FeedbackMoveMouseListener extends MouseListener {
             } else {
                 action = removeMovementRestrictionFeedback(element, this.tool.movementRestrictor);
             }
-
             this.tool.dispatchFeedback([action], this);
         }
         return newPosition;
@@ -270,13 +285,27 @@ export class FeedbackMoveMouseListener extends MouseListener {
             }
             result.push(cursorFeedbackAction(CursorCSS.DEFAULT));
         }
+        this.reset();
+        return result;
+    }
+
+    protected reset(resetFeedback = false): void {
+        if (this.rootElement && resetFeedback) {
+            const elementMoves: ElementMove[] = this.getElementMovesForDelta(this.rootElement, { x: 0, y: 0 }, true, true);
+            const moveAction = MoveAction.create(elementMoves, { animate: false, finished: true });
+            this.tool.deregisterFeedback([moveAction], this);
+        }
         this.hasDragged = false;
         this.startDragPosition = undefined;
+        this.rootElement = undefined;
         this.elementId2startPos.clear();
-        return result;
     }
 
     override decorate(vnode: VNode, _element: SModelElement): VNode {
         return vnode;
     }
+
+    dispose(): void {
+        this.reset(true);
+    }
 }

packages/client/src/features/tools/change-bounds-tool.ts

@@ -22,6 +22,7 @@ import {
     ChangeRoutingPointsOperation,
     CompoundOperation,
     Dimension,
+    Disposable,
     DisposableCollection,
     EdgeRouterRegistry,
     ElementAndBounds,
@@ -117,6 +118,12 @@ export class ChangeBoundsTool extends BaseGLSPTool {
     }
 
     disable(): void {
+        if (Disposable.is(this.feedbackMoveMouseListener)) {
+            this.feedbackMoveMouseListener.dispose();
+        }
+        if (Disposable.is(this.changeBoundsListener)) {
+            this.changeBoundsListener.dispose();
+        }
         this.mouseTool.deregister(this.changeBoundsListener);
         this.mouseTool.deregister(this.feedbackMoveMouseListener);
         this.deregisterFeedback([], this.feedbackMoveMouseListener);
@@ -125,7 +132,7 @@ export class ChangeBoundsTool extends BaseGLSPTool {
     }
 }
 
-export class ChangeBoundsListener extends DragAwareMouseListener implements ISelectionListener {
+export class ChangeBoundsListener extends DragAwareMouseListener implements ISelectionListener, Disposable {
     static readonly CSS_CLASS_ACTIVE = 'active';
 
     // members for calculating the correct position change
@@ -176,7 +183,7 @@ export class ChangeBoundsListener extends DragAwareMouseListener implements ISel
                 const resizeActions = this.handleResizeOnClient(positionUpdate);
                 actions.push(...resizeActions);
             }
-            return actions;
+            this.tool.dispatchFeedback(actions, this);
         }
         return [];
     }
@@ -319,9 +326,23 @@ export class ChangeBoundsListener extends DragAwareMouseListener implements ISel
         }
     }
 
+    dispose(): void {
+        this.reset();
+    }
+
     protected reset(): void {
         if (this.activeResizeElement && isResizable(this.activeResizeElement)) {
-            this.tool.dispatchFeedback([HideChangeBoundsToolResizeFeedbackAction.create()], this);
+            if (this.initialBounds) {
+                const resetResizeAction = SetBoundsAction.create([
+                    {
+                        elementId: this.activeResizeElement.id,
+                        newPosition: this.initialBounds,
+                        newSize: this.initialBounds
+                    }
+                ]);
+                this.tool.deregisterFeedback([resetResizeAction], this);
+            }
+            this.tool.deregisterFeedback([HideChangeBoundsToolResizeFeedbackAction.create()], this);
         }
         this.tool.dispatchActions([cursorFeedbackAction(CursorCSS.DEFAULT)]);
         this.resetPosition();