@eclipse-glsp/client 0.9.0 → 0.10.0-next.17bfb07.173

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

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2020-2021 EclipseSource and others.
+ * Copyright (c) 2020-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
@@ -14,11 +14,11 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 /* eslint-disable import/no-deprecated,no-unused-expressions */
-import { Action } from '@eclipse-glsp/protocol';
+import { Action, SModelElementSchema } from '@eclipse-glsp/protocol';
 import { AssertionError, expect } from 'chai';
 import { Container, injectable } from 'inversify';
-import { defaultModule, SGraphFactory, SModelElementSchema, SModelRoot, TYPES } from 'sprotty';
-import { GLSP_TYPES } from '../../base/types';
+import { defaultModule, SGraphFactory, SModelRoot } from 'sprotty';
+import { TYPES } from '../../base/types';
 import { IFeedbackActionDispatcher, IFeedbackEmitter } from '../tool-feedback/feedback-action-dispatcher';
 import { SelectFeedbackAction } from './select-feedback-action';
 import { SelectionListener, SelectionService } from './selection-service';
@@ -74,14 +74,16 @@ class MockSelectionListener implements SelectionListener {
 function createContainer(): Container {
     const container = new Container();
     container.load(defaultModule);
+    // eslint-disable-next-line deprecation/deprecation
     container.rebind(TYPES.IModelFactory).to(SGraphFactory).inSingletonScope();
-    container.bind(GLSP_TYPES.IFeedbackActionDispatcher).to(MockFeedbackActionDispatcher).inSingletonScope();
+    container.bind(TYPES.IFeedbackActionDispatcher).to(MockFeedbackActionDispatcher).inSingletonScope();
     container.bind(SelectionService).toSelf().inSingletonScope();
-    container.bind(GLSP_TYPES.SelectionService).toService(SelectionService);
+    container.bind(TYPES.SelectionService).toService(SelectionService);
     return container;
 }
 
 describe('SelectionService', () => {
+    // eslint-disable-next-line deprecation/deprecation
     let graphFactory: SGraphFactory;
     let root: SModelRoot;
     let selectionService: SelectionService;
@@ -89,10 +91,11 @@ describe('SelectionService', () => {
 
     beforeEach(() => {
         const container = createContainer();
+        // eslint-disable-next-line deprecation/deprecation
         graphFactory = container.get<SGraphFactory>(TYPES.IModelFactory);
         root = createRoot('node1', 'node2', 'node3', 'node4', 'node5');
-        selectionService = container.get<SelectionService>(GLSP_TYPES.SelectionService);
-        feedbackDispatcher = container.get<MockFeedbackActionDispatcher>(GLSP_TYPES.IFeedbackActionDispatcher);
+        selectionService = container.get<SelectionService>(TYPES.SelectionService);
+        feedbackDispatcher = container.get<MockFeedbackActionDispatcher>(TYPES.IFeedbackActionDispatcher);
     });
 
     describe('Initial State', () => {
@@ -344,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

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2019-2021 EclipseSource and others.
+ * Copyright (c) 2019-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
@@ -13,24 +13,23 @@
  *
  * 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,
     CommandExecutionContext,
     ILogger,
     isSelectable,
-    isSelected,
     SChildElement,
+    Selectable,
     SelectAllCommand as SprottySelectAllCommand,
     SelectCommand as SprottySelectCommand,
     SModelElement,
-    SModelRoot,
-    SParentElement,
-    TYPES
+    SModelRoot
 } from 'sprotty';
 import { SModelRootListener } from '../../base/model/update-model-command';
-import { GLSP_TYPES } from '../../base/types';
+import { TYPES } from '../../base/types';
+import { getElements, getMatchingElements } from '../../utils/smodel-util';
 import { IFeedbackActionDispatcher } from '../tool-feedback/feedback-action-dispatcher';
 import { SelectFeedbackAction } from './select-feedback-action';
 
@@ -43,10 +42,10 @@ export class SelectionService implements SModelRootListener {
     private root: Readonly<SModelRoot>;
     private selectedElementIDs: Set<string> = new Set();
 
-    @inject(GLSP_TYPES.IFeedbackActionDispatcher) protected feedbackDispatcher: IFeedbackActionDispatcher;
+    @inject(TYPES.IFeedbackActionDispatcher) protected feedbackDispatcher: IFeedbackActionDispatcher;
     @inject(TYPES.ILogger) protected logger: ILogger;
 
-    constructor(@multiInject(GLSP_TYPES.SelectionListener) @optional() protected selectionListeners: SelectionListener[] = []) {}
+    constructor(@multiInject(TYPES.SelectionListener) @optional() protected selectionListeners: SelectionListener[] = []) {}
 
     register(selectionListener: SelectionListener): void {
         distinctAdd(this.selectionListeners, selectionListener);
@@ -100,7 +99,12 @@ export class SelectionService implements SModelRootListener {
             ![...prevSelectedElementIDs].every(value => this.selectedElementIDs.has(value));
         if (selectionChanged) {
             // aggregate to feedback action handling all elements as only the last feedback is restored
-            this.dispatchFeedback([new SelectFeedbackAction([...this.selectedElementIDs], [...deselectedElementIDs])]);
+            this.dispatchFeedback([
+                SelectFeedbackAction.create({
+                    selectedElementsIDs: [...this.selectedElementIDs],
+                    deselectedElementsIDs: [...deselectedElementIDs]
+                })
+            ]);
         }
 
         const rootChanged = prevRoot !== root;
@@ -122,16 +126,16 @@ export class SelectionService implements SModelRootListener {
         return this.root;
     }
 
-    getSelectedElements(): Readonly<SModelElement>[] {
-        return Array.from(this.root.index.all().filter(isSelected));
+    getSelectedElements(): Readonly<SModelElement & Selectable>[] {
+        return getElements(this.root.index, Array.from(this.selectedElementIDs), isSelectable);
     }
 
     /**
      * QUERY METHODS
      */
 
-    getSelectedElementIDs(): Set<string> {
-        return this.selectedElementIDs;
+    getSelectedElementIDs(): string[] {
+        return [...this.selectedElementIDs];
     }
 
     hasSelectedElements(): boolean {
@@ -147,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;
@@ -156,43 +165,37 @@ export class SelectCommand extends Command {
 
     constructor(
         @inject(TYPES.Action) public action: SelectAction,
-        @inject(GLSP_TYPES.SelectionService) public selectionService: SelectionService
+        @inject(TYPES.SelectionService) public selectionService: SelectionService
     ) {
         super();
     }
 
     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;
@@ -200,44 +203,33 @@ export class SelectAllCommand extends Command {
 
     constructor(
         @inject(TYPES.Action) public action: SelectAllAction,
-        @inject(GLSP_TYPES.SelectionService) public selectionService: SelectionService
+        @inject(TYPES.SelectionService) public selectionService: SelectionService
     ) {
         super();
     }
 
     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/tool-feedback/change-bounds-tool-feedback.ts

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2019-2021 EclipseSource and others.
+ * Copyright (c) 2019-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
@@ -13,7 +13,7 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-import { Action, Point } from '@eclipse-glsp/protocol';
+import { Action, hasStringProp, Point } from '@eclipse-glsp/protocol';
 import { inject, injectable } from 'inversify';
 import { VNode } from 'snabbdom';
 import {
@@ -31,34 +31,64 @@ import {
     SModelRoot,
     TYPES
 } from 'sprotty';
-import { isNotUndefined } from '../../utils/smodel-util';
+import { forEachElement } from '../../utils/smodel-util';
 import { addResizeHandles, isResizable, removeResizeHandles, SResizeHandle } from '../change-bounds/model';
 import { createMovementRestrictionFeedback, removeMovementRestrictionFeedback } from '../change-bounds/movement-restrictor';
 import { CursorCSS, cursorFeedbackAction } from '../tool-feedback/css-feedback';
 import { ChangeBoundsTool } from '../tools/change-bounds-tool';
 import { FeedbackCommand } from './model';
 
-export class ShowChangeBoundsToolResizeFeedbackAction implements Action {
-    constructor(readonly elementId?: string, public readonly kind: string = ShowChangeBoundsToolResizeFeedbackCommand.KIND) {}
+export interface ShowChangeBoundsToolResizeFeedbackAction extends Action {
+    kind: typeof ShowChangeBoundsToolResizeFeedbackAction.KIND;
+
+    elementId: string;
+}
+
+export namespace ShowChangeBoundsToolResizeFeedbackAction {
+    export const KIND = 'showChangeBoundsToolResizeFeedback';
+
+    export function is(object: any): object is ShowChangeBoundsToolResizeFeedbackAction {
+        return Action.hasKind(object, KIND) && hasStringProp(object, 'elementId');
+    }
+
+    export function create(elementId: string): ShowChangeBoundsToolResizeFeedbackAction {
+        return {
+            kind: KIND,
+            elementId
+        };
+    }
 }
 
-export class HideChangeBoundsToolResizeFeedbackAction implements Action {
-    constructor(public readonly kind: string = HideChangeBoundsToolResizeFeedbackCommand.KIND) {}
+export interface HideChangeBoundsToolResizeFeedbackAction extends Action {
+    kind: typeof HideChangeBoundsToolResizeFeedbackAction.KIND;
+}
+
+export namespace HideChangeBoundsToolResizeFeedbackAction {
+    export const KIND = 'hideChangeBoundsToolResizeFeedback';
+
+    export function is(object: any): object is HideChangeBoundsToolResizeFeedbackAction {
+        return Action.hasKind(object, KIND);
+    }
+
+    export function create(): HideChangeBoundsToolResizeFeedbackAction {
+        return { kind: KIND };
+    }
 }
 
 @injectable()
 export class ShowChangeBoundsToolResizeFeedbackCommand extends FeedbackCommand {
-    static readonly KIND = 'showChangeBoundsToolResizeFeedback';
+    static readonly KIND = ShowChangeBoundsToolResizeFeedbackAction.KIND;
 
     @inject(TYPES.Action) protected action: ShowChangeBoundsToolResizeFeedbackAction;
 
     execute(context: CommandExecutionContext): CommandReturn {
         const index = context.root.index;
-        index.all().filter(isResizable).forEach(removeResizeHandles);
 
-        if (isNotUndefined(this.action.elementId)) {
+        forEachElement(index, isResizable, removeResizeHandles);
+
+        if (this.action.elementId) {
             const resizeElement = index.getById(this.action.elementId);
-            if (isNotUndefined(resizeElement) && isResizable(resizeElement)) {
+            if (resizeElement && isResizable(resizeElement)) {
                 addResizeHandles(resizeElement);
             }
         }
@@ -68,13 +98,13 @@ export class ShowChangeBoundsToolResizeFeedbackCommand extends FeedbackCommand {
 
 @injectable()
 export class HideChangeBoundsToolResizeFeedbackCommand extends FeedbackCommand {
-    static readonly KIND = 'hideChangeBoundsToolResizeFeedback';
+    static readonly KIND = HideChangeBoundsToolResizeFeedbackAction.KIND;
 
     @inject(TYPES.Action) protected action: HideChangeBoundsToolResizeFeedbackAction;
 
     execute(context: CommandExecutionContext): CommandReturn {
         const index = context.root.index;
-        index.all().filter(isResizable).forEach(removeResizeHandles);
+        forEachElement(index, isResizable, removeResizeHandles);
         return context.root;
     }
 }
@@ -95,7 +125,7 @@ export class FeedbackMoveMouseListener extends MouseListener {
         super();
     }
 
-    mouseDown(target: SModelElement, event: MouseEvent): Action[] {
+    override mouseDown(target: SModelElement, event: MouseEvent): Action[] {
         if (event.button === 0 && !(target instanceof SResizeHandle)) {
             const moveable = findParentByFeature(target, isMoveable);
             if (moveable !== undefined) {
@@ -108,7 +138,7 @@ export class FeedbackMoveMouseListener extends MouseListener {
         return [];
     }
 
-    mouseMove(target: SModelElement, event: MouseEvent): Action[] {
+    override mouseMove(target: SModelElement, event: MouseEvent): Action[] {
         const result: Action[] = [];
         if (event.buttons === 0) {
             this.mouseUp(target, event);
@@ -148,7 +178,7 @@ export class FeedbackMoveMouseListener extends MouseListener {
         return false;
     }
 
-    protected getElementMoves(target: SModelElement, event: MouseEvent, isFinished: boolean): MoveAction | undefined {
+    protected getElementMoves(target: SModelElement, event: MouseEvent, finished: boolean): MoveAction | undefined {
         if (!this.startDragPosition) {
             return undefined;
         }
@@ -172,7 +202,7 @@ export class FeedbackMoveMouseListener extends MouseListener {
                 );
 
                 if (isMoveable(element)) {
-                    toPosition = this.validateMove(startPosition, toPosition, element, isFinished);
+                    toPosition = this.validateMove(startPosition, toPosition, element, finished);
                     elementMoves.push({
                         elementId: element.id,
                         fromPosition: {
@@ -185,7 +215,7 @@ export class FeedbackMoveMouseListener extends MouseListener {
             }
         });
         if (elementMoves.length > 0) {
-            return new MoveAction(elementMoves, false, isFinished);
+            return MoveAction.create(elementMoves, { animate: false, finished });
         } else {
             return undefined;
         }
@@ -194,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);
@@ -219,14 +249,14 @@ export class FeedbackMoveMouseListener extends MouseListener {
         }
     }
 
-    mouseEnter(target: SModelElement, event: MouseEvent): Action[] {
+    override mouseEnter(target: SModelElement, event: MouseEvent): Action[] {
         if (target instanceof SModelRoot && event.buttons === 0 && !this.startDragPosition) {
             this.mouseUp(target, event);
         }
         return [];
     }
 
-    mouseUp(target: SModelElement, event: MouseEvent): Action[] {
+    override mouseUp(target: SModelElement, event: MouseEvent): Action[] {
         const result: Action[] = [];
         if (this.startDragPosition) {
             const moveAction = this.getElementMoves(target, event, true);
@@ -244,7 +274,7 @@ export class FeedbackMoveMouseListener extends MouseListener {
         return result;
     }
 
-    decorate(vnode: VNode, _element: SModelElement): VNode {
+    override decorate(vnode: VNode, _element: SModelElement): VNode {
         return vnode;
     }
 }

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

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2019-2021 EclipseSource and others.
+ * Copyright (c) 2019-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
@@ -13,15 +13,12 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-import { Action, Point } from '@eclipse-glsp/protocol';
+import { Action, Bounds, Point } from '@eclipse-glsp/protocol';
 import { inject, injectable } from 'inversify';
 import {
-    add,
     AnchorComputerRegistry,
-    center,
     CommandExecutionContext,
     CommandReturn,
-    euclideanDistance,
     findChildrenAtPosition,
     findParentByFeature,
     isBoundsAware,
@@ -32,28 +29,40 @@ import {
     SChildElement,
     SConnectableElement,
     SDanglingAnchor,
-    SEdgeSchema,
+    SEdge as SEdgeSchema,
     SModelElement,
     SModelRoot,
     SRoutableElement,
     TYPES
 } from 'sprotty';
-import { isRoutable } from '../../utils/smodel-util';
+import { BoundsAwareModelElement, isRoutable } from '../../utils/smodel-util';
 import { getAbsolutePosition, toAbsoluteBounds, toAbsolutePosition } from '../../utils/viewpoint-util';
 import { FeedbackCommand } from './model';
+export interface DrawFeedbackEdgeAction extends Action {
+    kind: typeof DrawFeedbackEdgeAction.KIND;
+    elementTypeId: string;
+    sourceId: string;
+    edgeSchema?: SEdgeSchema;
+}
 
-export class DrawFeedbackEdgeAction implements Action {
-    constructor(
-        public readonly elementTypeId: string,
-        public readonly sourceId: string,
-        public readonly edgeSchema?: SEdgeSchema,
-        public readonly kind: string = DrawFeedbackEdgeCommand.KIND
-    ) {}
+export namespace DrawFeedbackEdgeAction {
+    export const KIND = 'drawFeedbackEdge';
+
+    export function is(object: any): object is DrawFeedbackEdgeAction {
+        return Action.hasKind(object, KIND);
+    }
+
+    export function create(options: { elementTypeId: string; sourceId: string; edgeSchema?: SEdgeSchema }): DrawFeedbackEdgeAction {
+        return {
+            kind: KIND,
+            ...options
+        };
+    }
 }
 
 @injectable()
 export class DrawFeedbackEdgeCommand extends FeedbackCommand {
-    static readonly KIND = 'drawFeedbackEdge';
+    static readonly KIND = DrawFeedbackEdgeAction.KIND;
 
     constructor(@inject(TYPES.Action) protected action: DrawFeedbackEdgeAction) {
         super();
@@ -66,13 +75,25 @@ export class DrawFeedbackEdgeCommand extends FeedbackCommand {
     }
 }
 
-export class RemoveFeedbackEdgeAction implements Action {
-    constructor(public readonly kind: string = RemoveFeedbackEdgeCommand.KIND) {}
+export interface RemoveFeedbackEdgeAction extends Action {
+    kind: typeof RemoveFeedbackEdgeAction.KIND;
+}
+
+export namespace RemoveFeedbackEdgeAction {
+    export const KIND = 'removeFeedbackEdgeCommand';
+
+    export function is(object: any): object is RemoveFeedbackEdgeAction {
+        return Action.hasKind(object, KIND);
+    }
+
+    export function create(): RemoveFeedbackEdgeAction {
+        return { kind: KIND };
+    }
 }
 
 @injectable()
 export class RemoveFeedbackEdgeCommand extends FeedbackCommand {
-    static readonly KIND = 'removeFeedbackEdgeCommand';
+    static readonly KIND = RemoveFeedbackEdgeAction.KIND;
 
     execute(context: CommandExecutionContext): CommandReturn {
         removeFeedbackEdge(context.root);
@@ -86,7 +107,7 @@ export class FeedbackEdgeEnd extends SDanglingAnchor {
         readonly sourceId: string,
         readonly elementTypeId: string,
         public feedbackEdge: SRoutableElement | undefined = undefined,
-        public readonly type: string = FeedbackEdgeEnd.TYPE
+        override readonly type: string = FeedbackEdgeEnd.TYPE
     ) {
         super();
     }
@@ -97,7 +118,7 @@ export class FeedbackEdgeEndMovingMouseListener extends MouseListener {
         super();
     }
 
-    mouseMove(target: SModelElement, event: MouseEvent): Action[] {
+    override mouseMove(target: SModelElement, event: MouseEvent): Action[] {
         const root = target.root;
         const edgeEnd = root.index.getById(feedbackEdgeEndId(root));
         if (!(edgeEnd instanceof FeedbackEdgeEnd) || !edgeEnd.feedbackEdge) {
@@ -106,38 +127,66 @@ export class FeedbackEdgeEndMovingMouseListener extends MouseListener {
 
         const edge = edgeEnd.feedbackEdge;
         const position = getAbsolutePosition(edgeEnd, event);
-        const endAtMousePosition = findChildrenAtPosition(target.root, position).find(
-            element => isConnectable(element) && element.canConnect(edge, 'target')
-        );
+        const endAtMousePosition = findChildrenAtPosition(target.root, position)
+            .reverse()
+            .find(element => isConnectable(element) && element.canConnect(edge, 'target'));
 
         if (endAtMousePosition instanceof SConnectableElement && edge.source && isBoundsAware(edge.source)) {
-            const anchor = this.computeAbsoluteAnchor(endAtMousePosition, center(edge.source.bounds));
-            if (euclideanDistance(anchor, edgeEnd.position) > 1) {
-                return [new MoveAction([{ elementId: edgeEnd.id, toPosition: anchor }], false)];
+            const anchor = this.computeAbsoluteAnchor(endAtMousePosition, Bounds.center(toAbsoluteBounds(edge.source)));
+            if (Point.euclideanDistance(anchor, edgeEnd.position) > 1) {
+                return [MoveAction.create([{ elementId: edgeEnd.id, toPosition: anchor }], { animate: false })];
             }
         } else {
-            return [new MoveAction([{ elementId: edgeEnd.id, toPosition: position }], false)];
+            return [MoveAction.create([{ elementId: edgeEnd.id, toPosition: position }], { animate: false })];
         }
 
         return [];
     }
 
-    protected computeAbsoluteAnchor(element: SConnectableElement, referencePoint: Point, offset?: number): Point {
+    protected computeAbsoluteAnchor(element: SConnectableElement, absoluteReferencePoint: Point, offset?: number): Point {
+        const referencePointInParent = absoluteToParent(element, absoluteReferencePoint);
         const anchorComputer = this.anchorRegistry.get(PolylineEdgeRouter.KIND, element.anchorKind);
-        let anchor = anchorComputer.getAnchor(element, referencePoint, offset);
+        let anchor = anchorComputer.getAnchor(element, referencePointInParent, offset);
         // The anchor is computed in the local coordinate system of the element.
         // If the element is a nested child element we have to add the absolute position of its parent to the anchor.
         if (element.parent !== element.root) {
             const parent = findParentByFeature(element.parent, isBoundsAware);
             if (parent) {
                 const absoluteParentPosition = toAbsoluteBounds(parent);
-                anchor = add(absoluteParentPosition, anchor);
+                anchor = Point.add(absoluteParentPosition, anchor);
             }
         }
         return anchor;
     }
 }
 
+/**
+ * Convert a point, specified in absolute coordinates, to a point relative
+ * to the parent of the specified child element.
+ * @param element the child element
+ * @param absolutePoint a point in absolute coordinates
+ * @returns the equivalent point, relative to the element's parent coordinates
+ */
+function absoluteToParent(element: BoundsAwareModelElement & SChildElement, absolutePoint: Point): Point {
+    if (isBoundsAware(element.parent)) {
+        return absoluteToLocal(element.parent, absolutePoint);
+    }
+    // If the parent is not bounds-aware, assume it's at 0; 0 and proceed
+    return absoluteToLocal(element, absolutePoint);
+}
+
+/**
+ * Convert a point, specified in absolute coordinates, to a point relative
+ * to the specified element.
+ * @param element the element
+ * @param absolutePoint a point in absolute coordinates
+ * @returns the equivalent point, relative to the element's coordinates
+ */
+function absoluteToLocal(element: BoundsAwareModelElement, absolutePoint: Point): Point {
+    const absoluteElementBounds = toAbsoluteBounds(element);
+    return { x: absolutePoint.x - absoluteElementBounds.x, y: absolutePoint.y - absoluteElementBounds.y };
+}
+
 export function feedbackEdgeId(root: SModelRoot): string {
     return root.id + '_feedback_edge';
 }