@eclipse-glsp/client 0.10.0-next.e5fcffe.169 → 1.1.0-next.282a632.186

package/src/features/layout/layouter.ts

@@ -0,0 +1,137 @@
+/********************************************************************************
+ * Copyright (c) 2022 EclipseSource and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * 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 {
+    BoundsData,
+    ILogger,
+    LayoutRegistry,
+    StatefulLayouter,
+    SModelElement,
+    Layouter,
+    SParentElement,
+    LayoutContainer,
+    isLayoutContainer
+} from 'sprotty';
+import { injectable } from 'inversify';
+import { Bounds } from 'sprotty-protocol/lib/utils/geometry';
+
+@injectable()
+export class LayouterExt extends Layouter {
+    override layout(element2boundsData: Map<SModelElement, BoundsData>): void {
+        new StatefulLayouterExt(element2boundsData, this.layoutRegistry, this.logger).layout();
+    }
+}
+
+// 2-pass layout:
+// Step 1: Find "rendered size" of each element (may take resizeContainer into account)
+// Child-to-parent layout
+// Step 2: Extend parents as necessary, then use the adjusted parent size to properly
+// align children (center/end alignments, hGrab/vGrab)
+// Parent-to-children layout
+
+export class StatefulLayouterExt extends StatefulLayouter {
+    protected toBeLayouted2: (SParentElement & LayoutContainer)[];
+
+    /**
+     *
+     * @param elementToBoundsData The map of element to bounds data. Bounds Data are computed from the hidden
+     * SVG rendering pass.
+     * @param layoutRegistry2 The registry of available layouts.
+     * @param log The log.
+     */
+    constructor(
+        protected readonly elementToBoundsData: Map<SModelElement, BoundsData>,
+        protected readonly layoutRegistry2: LayoutRegistry,
+        log: ILogger
+    ) {
+        super(elementToBoundsData, layoutRegistry2, log);
+        this.toBeLayouted2 = [];
+        elementToBoundsData.forEach((data, element) => {
+            if (isLayoutContainer(element)) {
+                this.toBeLayouted2.push(element);
+            }
+        });
+        for (const element of this.toBeLayouted2) {
+            // Clear previous layout information for dynamic-layout objects
+            elementToBoundsData.delete(element);
+        }
+    }
+
+    override getBoundsData(element: SModelElement): BoundsData {
+        let boundsData = this.elementToBoundsData.get(element);
+        let bounds = (element as any).bounds;
+        if (isLayoutContainer(element) && this.toBeLayouted2.indexOf(element) >= 0) {
+            bounds = this.doLayout(element);
+        } else if (isLayoutContainer(element)) {
+            bounds = {
+                x: 0,
+                y: 0,
+                width: -1,
+                height: -1
+            };
+        }
+        if (!boundsData) {
+            boundsData = {
+                bounds: bounds,
+                boundsChanged: false,
+                alignmentChanged: false
+            };
+            this.elementToBoundsData.set(element, boundsData);
+        }
+        return boundsData;
+    }
+
+    override layout(): void {
+        // First pass: apply layout with cleared container data. Will get
+        // preferred size for all elements (Children first, then parents)
+        while (this.toBeLayouted2.length > 0) {
+            const element = this.toBeLayouted2[0];
+            this.doLayout(element);
+        }
+
+        this.toBeLayouted2 = [];
+        this.elementToBoundsData.forEach((data, element) => {
+            if (isLayoutContainer(element)) {
+                this.toBeLayouted2.push(element);
+            }
+        });
+
+        // Second pass: apply layout with initial size data for all
+        // nodes. Update the position/size of all elements, taking
+        // vGrab/hGrab into account (parent -> children).
+        while (this.toBeLayouted2.length > 0) {
+            const element = this.toBeLayouted2[0];
+            this.doLayout(element);
+        }
+    }
+
+    protected override doLayout(element: SParentElement & LayoutContainer): Bounds {
+        const index = this.toBeLayouted2.indexOf(element);
+        if (index >= 0) {
+            this.toBeLayouted2.splice(index, 1);
+        }
+        const layout = this.layoutRegistry2.get(element.layout);
+        if (layout) {
+            layout.layout(element, this);
+        }
+        const boundsData = this.elementToBoundsData.get(element);
+        if (boundsData !== undefined && boundsData.bounds !== undefined) {
+            return boundsData.bounds;
+        } else {
+            this.log.error(element, 'Layout failed');
+            return Bounds.EMPTY;
+        }
+    }
+}

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

@@ -49,6 +49,9 @@ export class VBoxLayouterExt extends VBoxLayouter {
 
         const fixedSize = this.getFixedContainerBounds(container, options, layouter);
 
+        const currentWidth = (boundsData.bounds?.width || 0) - options.paddingLeft - options.paddingRight;
+        const currentHeight = (boundsData.bounds?.height || 0) - options.paddingTop - options.paddingBottom;
+
         const maxWidth =
             options.paddingFactor *
             (options.resizeContainer
@@ -60,8 +63,11 @@ export class VBoxLayouterExt extends VBoxLayouter {
                 ? Math.max(fixedSize.height - options.paddingTop - options.paddingBottom, childrenSize.height)
                 : Math.max(0, fixedSize.height - options.paddingTop - options.paddingBottom));
 
+        const width = Math.max(currentWidth, maxWidth);
+        const height = Math.max(currentHeight, maxHeight);
+
         // Remaining size that can be grabbed by children with the vGrab option
-        const grabHeight: number = maxHeight - childrenSize.height;
+        const grabHeight: number = height - childrenSize.height;
         // Number of children that request vGrab
         // FIXME: This approach works fine when only 1 child uses VGrab, but may cause rounding issues
         // when the grabHeight can't be equally shared by all children.
@@ -70,7 +76,7 @@ export class VBoxLayouterExt extends VBoxLayouter {
             .filter(opt => opt.vGrab).length;
 
         if (maxWidth > 0 && maxHeight > 0) {
-            const offset = this.layoutChildren(container, layouter, options, maxWidth, maxHeight, grabHeight, grabbingChildren);
+            const offset = this.layoutChildren(container, layouter, options, width, height, grabHeight, grabbingChildren);
             boundsData.bounds = this.getFinalContainerBounds(container, offset, options, childrenSize.width, childrenSize.height);
             boundsData.boundsChanged = true;
         }
@@ -155,7 +161,14 @@ export class VBoxLayouterExt extends VBoxLayouter {
         grabHeight?: number,
         grabbingChildren?: number
     ): Point {
+        const hAlign = childOptions.hGrab ? 'left' : childOptions.hAlign;
+        const dx = this.getDx(hAlign, bounds, maxWidth);
         let offset = super.layoutChild(child, boundsData, bounds, childOptions, containerOptions, currentOffset, maxWidth, maxHeight);
+        boundsData.bounds = {
+            ...boundsData.bounds!,
+            x: currentOffset.x + dx,
+            y: currentOffset.y
+        };
         if (childOptions.hGrab) {
             boundsData.bounds = {
                 x: boundsData.bounds!.x,
@@ -197,7 +210,7 @@ export class VBoxLayouterExt extends VBoxLayouter {
     }
 
     protected override getChildLayoutOptions(child: SChildElement, containerOptions: VBoxLayoutOptionsExt): VBoxLayoutOptionsExt {
-        return super.getChildLayoutOptions(child, containerOptions) as VBoxLayoutOptionsExt;
+        return super.getChildLayoutOptions(child, this.filterContainerOptions(containerOptions)) as VBoxLayoutOptionsExt;
     }
 
     protected override getLayoutOptions(element: SModelElement): VBoxLayoutOptionsExt {
@@ -250,7 +263,11 @@ export class VBoxLayouterExt extends VBoxLayouter {
         };
     }
 
-    protected override spread(a: VBoxLayoutOptionsExt, b: VBoxLayoutOptionsExt): VBoxLayoutOptionsExt {
-        return { ...a, ...b };
+    protected filterContainerOptions(containerOptions: VBoxLayoutOptionsExt): VBoxLayoutOptionsExt {
+        // Reset object-specific layout options to default before merging,
+        // to make sure they won't be inherited (grab, prefSize)
+        // eslint-disable-next-line no-null/no-null
+        const localOptions = { vGrab: false, hGrab: false, prefHeight: null, prefWidth: null };
+        return { ...containerOptions, ...localOptions };
     }
 }

package/src/features/mouse-tool/mouse-tool.ts

@@ -13,6 +13,7 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
+import { Action } from '@eclipse-glsp/protocol';
 import { injectable, multiInject, optional } from 'inversify';
 import { MouseListener, MouseTool, SModelElement, SModelRoot } from 'sprotty';
 import { TYPES } from '../../base/types';
@@ -48,10 +49,6 @@ export class RankingMouseTool extends MouseTool implements IMouseTool {
         this.rankedMouseListeners = groupBy(this.mouseListeners, listener => getRank(listener));
     }
 
-    contextMenu(model: SModelRoot, event: MouseEvent): void {
-        event.preventDefault();
-    }
-
     protected override handleEvent<K extends MouseListenerMethods>(methodName: K, model: SModelRoot, event: MouseEvent): void {
         this.focusOnMouseEvent(methodName, model);
         const element = this.getTargetElement(model, event);
@@ -82,8 +79,13 @@ export class RankingMouseTool extends MouseTool implements IMouseTool {
         if (actions.length > 0) {
             event.preventDefault();
             for (const actionOrPromise of actions) {
-                const action = await actionOrPromise;
-                await this.actionDispatcher.dispatch(action);
+                if (Action.is(actionOrPromise)) {
+                    await this.actionDispatcher.dispatch(actionOrPromise);
+                } else {
+                    actionOrPromise.then((action: Action) => {
+                        this.actionDispatcher.dispatch(action);
+                    });
+                }
             }
         }
     }

package/src/features/select/select-mouse-listener.ts

@@ -13,7 +13,21 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-import { SelectMouseListener } from 'sprotty';
+import { Action, SelectAction } from '@eclipse-glsp/protocol';
+import {
+    BringToFrontAction,
+    findParentByFeature,
+    isCtrlOrCmd,
+    isSelectable,
+    SButton,
+    SelectMouseListener,
+    SModelElement,
+    SModelRoot,
+    SRoutableElement,
+    SRoutingHandle,
+    SwitchEditModeAction
+} from 'sprotty';
+import { toArray } from 'sprotty/lib/utils/iterable';
 import { DEFAULT_RANK, Ranked } from '../rank/model';
 
 /**
@@ -22,4 +36,70 @@ import { DEFAULT_RANK, Ranked } from '../rank/model';
  */
 export class RankedSelectMouseListener extends SelectMouseListener implements Ranked {
     rank: number = DEFAULT_RANK - 1; /* we want to be executed before all default mouse listeners */
+
+    override mouseDown(target: SModelElement, event: MouseEvent): Action[] {
+        const result: Action[] = [];
+        if (this.buttonHandlerRegistry !== undefined && target instanceof SButton && target.enabled) {
+            const buttonHandler = this.buttonHandlerRegistry.get(target.type);
+            if (buttonHandler !== undefined) {
+                return buttonHandler.buttonPressed(target);
+            }
+        }
+        const selectableTarget = findParentByFeature(target, isSelectable);
+        if (selectableTarget !== undefined || target instanceof SModelRoot) {
+            this.hasDragged = false;
+            let deselect: SModelElement[] = [];
+            // multi-selection?
+            if (!isCtrlOrCmd(event)) {
+                deselect = toArray(
+                    target.root.index
+                        .all()
+                        .filter(
+                            element =>
+                                isSelectable(element) &&
+                                element.selected &&
+                                !(selectableTarget instanceof SRoutingHandle && element === (selectableTarget.parent as SModelElement))
+                        )
+                );
+            }
+            if (selectableTarget !== undefined) {
+                if (!selectableTarget.selected) {
+                    this.wasSelected = false;
+                    result.push(
+                        SelectAction.create({
+                            selectedElementsIDs: [selectableTarget.id],
+                            deselectedElementsIDs: deselect.map(e => e.id)
+                        })
+                    );
+                    result.push(BringToFrontAction.create([selectableTarget.id]));
+                    const routableDeselect = deselect.filter(e => e instanceof SRoutableElement).map(e => e.id);
+                    if (selectableTarget instanceof SRoutableElement) {
+                        result.push(
+                            SwitchEditModeAction.create({
+                                elementsToActivate: [selectableTarget.id],
+                                elementsToDeactivate: routableDeselect
+                            })
+                        );
+                    } else if (routableDeselect.length > 0) {
+                        result.push(SwitchEditModeAction.create({ elementsToDeactivate: routableDeselect }));
+                    }
+                } else if (isCtrlOrCmd(event)) {
+                    this.wasSelected = false;
+                    result.push(SelectAction.create({ deselectedElementsIDs: [selectableTarget.id] }));
+                    if (selectableTarget instanceof SRoutableElement) {
+                        result.push(SwitchEditModeAction.create({ elementsToDeactivate: [selectableTarget.id] }));
+                    }
+                } else {
+                    this.wasSelected = true;
+                }
+            } else {
+                result.push(SelectAction.create({ deselectedElementsIDs: deselect.map(e => e.id) }));
+                const routableDeselect = deselect.filter(e => e instanceof SRoutableElement).map(e => e.id);
+                if (routableDeselect.length > 0) {
+                    result.push(SwitchEditModeAction.create({ elementsToDeactivate: routableDeselect }));
+                }
+            }
+        }
+        return result;
+    }
 }

package/src/features/select/selection-service.spec.ts

@@ -347,7 +347,7 @@ describe('SelectionService', () => {
         expect(selectionService.hasSelectedElements()).to.equal(expectedSelection.length > 0);
         expect(selectionService.getSelectedElementIDs()).to.have.lengthOf(expectedSelection.length);
         if (expectedSelection.length > 0) {
-            expect(selectionService.getSelectedElementIDs()).to.have.all.keys(...expectedSelection);
+            expect(selectionService.getSelectedElementIDs()).to.have.ordered.members(expectedSelection);
         }
     }
 

package/src/features/select/selection-service.ts

@@ -13,7 +13,7 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-import { Action, distinctAdd, remove, SelectAction, SelectAllAction } from '@eclipse-glsp/protocol';
+import { Action, distinctAdd, pluck, remove, SelectAction, SelectAllAction } from '@eclipse-glsp/protocol';
 import { inject, injectable, multiInject, optional } from 'inversify';
 import {
     Command,
@@ -25,12 +25,11 @@ import {
     SelectAllCommand as SprottySelectAllCommand,
     SelectCommand as SprottySelectCommand,
     SModelElement,
-    SModelRoot,
-    SParentElement
+    SModelRoot
 } from 'sprotty';
 import { SModelRootListener } from '../../base/model/update-model-command';
 import { TYPES } from '../../base/types';
-import { getElements } from '../../utils/smodel-util';
+import { getElements, getMatchingElements } from '../../utils/smodel-util';
 import { IFeedbackActionDispatcher } from '../tool-feedback/feedback-action-dispatcher';
 import { SelectFeedbackAction } from './select-feedback-action';
 
@@ -135,8 +134,8 @@ export class SelectionService implements SModelRootListener {
      * QUERY METHODS
      */
 
-    getSelectedElementIDs(): Set<string> {
-        return this.selectedElementIDs;
+    getSelectedElementIDs(): string[] {
+        return [...this.selectedElementIDs];
     }
 
     hasSelectedElements(): boolean {
@@ -152,6 +151,11 @@ export class SelectionService implements SModelRootListener {
     }
 }
 
+/**
+ * Handles a {@link SelectAction} and propagates the new selection to the {@link SelectionService}.
+ * Other tools might be selection-sensitive which means {@link SelectAction}s must be processed as fast as possible.
+ * Handling the action with a command ensures that the action is processed before the next render tick.
+ */
 @injectable()
 export class SelectCommand extends Command {
     static readonly KIND = SprottySelectCommand.KIND;
@@ -168,36 +172,30 @@ export class SelectCommand extends Command {
 
     execute(context: CommandExecutionContext): SModelRoot {
         const model = context.root;
-        this.action.selectedElementsIDs.forEach(id => {
-            const element = model.index.getById(id);
-            if (element instanceof SChildElement && isSelectable(element)) {
-                this.selected.push(element);
-            }
-        });
-        this.action.deselectedElementsIDs.forEach(id => {
-            const element = model.index.getById(id);
-            if (element instanceof SChildElement && isSelectable(element)) {
-                this.deselected.push(element);
-            }
-        });
-        return this.redo(context);
+        const selectionGuard = (element: any): element is SModelElement => element instanceof SChildElement && isSelectable(element);
+        const selectedElements = getElements(model.index, this.action.selectedElementsIDs, selectionGuard);
+        const deselectedElements = getElements(model.index, this.action.deselectedElementsIDs, selectionGuard);
+
+        this.selectionService.updateSelection(model, pluck(selectedElements, 'id'), pluck(deselectedElements, 'id'));
+        return model;
     }
 
+    // Basically no-op since client-side undo is not supported in GLSP.
     undo(context: CommandExecutionContext): SModelRoot {
-        const select = this.deselected.map(element => element.id);
-        const deselect = this.selected.map(element => element.id);
-        this.selectionService.updateSelection(context.root, select, deselect);
         return context.root;
     }
 
+    // Basically no-op since client-side redo is not supported in GLSP.
     redo(context: CommandExecutionContext): SModelRoot {
-        const select = this.selected.map(element => element.id);
-        const deselect = this.deselected.map(element => element.id);
-        this.selectionService.updateSelection(context.root, select, deselect);
         return context.root;
     }
 }
 
+/**
+ * Handles a {@link SelectAllAction} and propagates the new selection to the {@link SelectionService}.
+ * Other tools might be selection-sensitive which means {@link SelectionAllAction}s must be processed as fast as possible.
+ * Handling the action with a command ensures that the action is processed before the next render tick.
+ */
 @injectable()
 export class SelectAllCommand extends Command {
     static readonly KIND = SprottySelectAllCommand.KIND;
@@ -211,38 +209,27 @@ export class SelectAllCommand extends Command {
     }
 
     execute(context: CommandExecutionContext): SModelRoot {
-        return this.redo(context);
+        const model = context.root;
+        const selectionGuard = (element: any): element is SModelElement => element instanceof SChildElement && isSelectable(element);
+
+        const selectables = getMatchingElements(model.index, selectionGuard);
+        const selectableIds = pluck(selectables, 'id');
+        if (this.action.select) {
+            this.selectionService.updateSelection(model, selectableIds, []);
+        } else {
+            this.selectionService.updateSelection(model, [], selectableIds);
+        }
+
+        return model;
     }
 
+    // Basically no-op since client-side undo is not supported in GLSP.
     undo(context: CommandExecutionContext): SModelRoot {
-        const index = context.root.index;
-        for (const previousState of this.previousSelection) {
-            const element = index.getById(previousState[0]);
-            if (element !== undefined && isSelectable(element)) {
-                element.selected = previousState[1];
-            }
-        }
         return context.root;
     }
 
+    // Basically no-op since client-side redo is not supported in GLSP.
     redo(context: CommandExecutionContext): SModelRoot {
-        const selectables: string[] = [];
-        this.selectAll(context.root, this.action.select, selectables);
-        if (this.action.select) {
-            this.selectionService.updateSelection(context.root, selectables, []);
-        } else {
-            this.selectionService.updateSelection(context.root, [], selectables);
-        }
         return context.root;
     }
-
-    protected selectAll(element: SParentElement, newState: boolean, selected: string[]): void {
-        if (isSelectable(element)) {
-            this.previousSelection.set(element.id, element.selected);
-            selected.push(element.id);
-        }
-        for (const child of element.children) {
-            this.selectAll(child, newState, selected);
-        }
-    }
 }

package/src/features/{model-source-watcher → source-model-watcher}/di.config.ts

@@ -13,13 +13,13 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-import { ModelSourceChangedAction } from '@eclipse-glsp/protocol';
+import { SourceModelChangedAction } from '@eclipse-glsp/protocol';
 import { ContainerModule } from 'inversify';
 import { configureActionHandler } from 'sprotty';
-import { ModelSourceChangedActionHandler } from './model-source-changed-action-handler';
+import { SourceModelChangedActionHandler } from './source-model-changed-action-handler';
 
-const modelSourceWatcherModule = new ContainerModule((bind, _unbind, isBound) => {
-    configureActionHandler({ bind, isBound }, ModelSourceChangedAction.KIND, ModelSourceChangedActionHandler);
+const sourceModelWatcherModule = new ContainerModule((bind, _unbind, isBound) => {
+    configureActionHandler({ bind, isBound }, SourceModelChangedAction.KIND, SourceModelChangedActionHandler);
 });
 
-export default modelSourceWatcherModule;
+export default sourceModelWatcherModule;

package/src/features/{model-source-watcher/model-source-changed-action-handler.ts → source-model-watcher/source-model-changed-action-handler.ts}

@@ -13,43 +13,43 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-import { Action, ModelSourceChangedAction, ServerMessageAction, ServerStatusAction } from '@eclipse-glsp/protocol';
+import { Action, ServerMessageAction, ServerStatusAction, SourceModelChangedAction } from '@eclipse-glsp/protocol';
 import { inject, injectable, optional } from 'inversify';
 import { IActionDispatcher, IActionHandler, ViewerOptions } from 'sprotty';
 import { TYPES } from '../../base/types';
 
 /**
- * An external handler of the model source change event.
+ * An external handler of the source model change event.
  *
  * This allows external applications to react specifically to this event, e.g. by bringing up the diagram,
  * check their dirty state, show a dialog, etc.
  */
 @injectable()
-export abstract class ExternalModelSourceChangedHandler {
+export abstract class ExternalSourceModelChangedHandler {
     /**
-     * Notifies about a change of the model source.
+     * Notifies about a change of the source model.
      * @returns actions to be dispatched after the notification.
      */
-    abstract notifyModelSourceChange(modelSourceName: string, options: ViewerOptions): Promise<Action[]>;
+    abstract notifySourceModelChange(sourceModelName: string, options: ViewerOptions): Promise<Action[]>;
 }
 
 @injectable()
-export class ModelSourceChangedActionHandler implements IActionHandler {
+export class SourceModelChangedActionHandler implements IActionHandler {
     @inject(TYPES.IActionDispatcher)
     protected dispatcher: IActionDispatcher;
 
     @inject(TYPES.ViewerOptions)
     protected options: ViewerOptions;
 
-    @inject(ExternalModelSourceChangedHandler)
+    @inject(ExternalSourceModelChangedHandler)
     @optional()
-    protected externalModelSourceChangedHandler?: ExternalModelSourceChangedHandler;
+    protected externalModelSourceChangedHandler?: ExternalSourceModelChangedHandler;
 
     handle(action: Action): void {
-        if (ModelSourceChangedAction.is(action)) {
+        if (SourceModelChangedAction.is(action)) {
             if (this.externalModelSourceChangedHandler) {
                 this.externalModelSourceChangedHandler
-                    .notifyModelSourceChange(action.modelSourceName, this.options)
+                    .notifySourceModelChange(action.sourceModelName, this.options)
                     .then(actions => this.dispatcher.dispatchAll(actions));
                 return;
             }
@@ -57,8 +57,8 @@ export class ModelSourceChangedActionHandler implements IActionHandler {
         }
     }
 
-    protected showSimpleNotification(action: ModelSourceChangedAction): void {
-        const message = `The model source ${action.modelSourceName} has changed. You might want to consider reloading.`;
+    protected showSimpleNotification(action: SourceModelChangedAction): void {
+        const message = `The source model ${action.sourceModelName} has changed. You might want to consider reloading.`;
         const timeout = 0;
         const severity = 'WARNING';
         this.dispatcher.dispatchAll([

package/src/features/tool-feedback/change-bounds-tool-feedback.ts

@@ -224,7 +224,7 @@ export class FeedbackMoveMouseListener extends MouseListener {
     protected validateMove(startPostion: Point, toPosition: Point, element: SModelElement, isFinished: boolean): Point {
         let newPosition = toPosition;
         if (this.tool.movementRestrictor) {
-            const valid = this.tool.movementRestrictor.validate(toPosition, element);
+            const valid = this.tool.movementRestrictor.validate(element, toPosition);
             let action;
             if (!valid) {
                 action = createMovementRestrictionFeedback(element, this.tool.movementRestrictor);

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

@@ -265,20 +265,20 @@ export class FeedbackEdgeRouteMovingMouseListener extends MouseListener {
         }
         const positionUpdate = this.pointPositionUpdater.updatePosition(target, { x: event.pageX, y: event.pageY }, !event.altKey);
         if (positionUpdate) {
-            const moveActions = this.handleMoveOnClient(target, positionUpdate);
+            const moveActions = this.handleMoveOnClient(target, positionUpdate, !event.altKey);
             result.push(...moveActions);
         }
         return result;
     }
 
-    protected handleMoveOnClient(target: SModelElement, positionUpdate: Point): Action[] {
+    protected handleMoveOnClient(target: SModelElement, positionUpdate: Point, isSnap: boolean): Action[] {
         const handleMoves: ElementMove[] = [];
         target.root.index
             .all()
             .filter(element => isSelected(element))
             .forEach(element => {
                 if (isRoutingHandle(element)) {
-                    const elementMove = this.toElementMove(element, positionUpdate);
+                    const elementMove = this.toElementMove(element, positionUpdate, isSnap);
                     if (elementMove) {
                         handleMoves.push(elementMove);
                     }
@@ -290,21 +290,29 @@ export class FeedbackEdgeRouteMovingMouseListener extends MouseListener {
         return [];
     }
 
-    protected toElementMove(element: SRoutingHandle, positionDelta: Point): ElementMove | undefined {
+    protected toElementMove(element: SRoutingHandle, positionDelta: Point, isSnap: boolean): ElementMove | undefined {
         const point = this.getHandlePosition(element);
         if (point !== undefined) {
+            const snappedPoint = this.getSnappedHandlePosition(element, point, isSnap);
             return {
                 elementId: element.id,
                 fromPosition: point,
                 toPosition: {
-                    x: point.x + positionDelta.x,
-                    y: point.y + positionDelta.y
+                    x: snappedPoint.x + positionDelta.x,
+                    y: snappedPoint.y + positionDelta.y
                 }
             };
         }
         return undefined;
     }
 
+    protected getSnappedHandlePosition(element: SRoutingHandle, point: Point, isSnap: boolean): Point {
+        if (this.snapper && isSnap) {
+            return this.snapper.snap(point, element);
+        }
+        return point;
+    }
+
     protected getHandlePosition(handle: SRoutingHandle): Point | undefined {
         if (this.edgeRouterRegistry) {
             const parent = handle.parent;