@eclipse-glsp/client 1.1.0-RC10 → 1.1.0-next.0363f0b.261

package/src/features/{tool-feedback/creation-tool-feedback.ts → tools/edge-creation/dangling-edge-feedback.ts}

@@ -16,30 +16,26 @@
 import { inject, injectable } from 'inversify';
 import {
     Action,
-    AnchorComputerRegistry,
-    Bounds,
+    BindingContext,
     CommandExecutionContext,
     CommandReturn,
-    MouseListener,
-    MoveAction,
-    Point,
-    PolylineEdgeRouter,
     SChildElement,
-    SConnectableElement,
     SDanglingAnchor,
     SEdgeSchema,
-    SModelElement,
     SModelRoot,
     SRoutableElement,
     TYPES,
-    findChildrenAtPosition,
+    configureCommand,
+    configureView,
     findParentByFeature,
     isBoundsAware,
     isConnectable
 } from '~glsp-sprotty';
-import { BoundsAwareModelElement, isRoutable } from '../../utils/smodel-util';
-import { getAbsolutePosition, toAbsoluteBounds, toAbsolutePosition } from '../../utils/viewpoint-util';
-import { FeedbackCommand } from './model';
+import { FeedbackCommand } from '../../../base/feedback/feedback-command';
+import { isRoutable } from '../../../utils/smodel-util';
+import { toAbsolutePosition } from '../../../utils/viewpoint-util';
+import { FeedbackEdgeEndView } from './view';
+
 export interface DrawFeedbackEdgeAction extends Action {
     kind: typeof DrawFeedbackEdgeAction.KIND;
     elementTypeId: string;
@@ -101,7 +97,7 @@ export class RemoveFeedbackEdgeCommand extends FeedbackCommand {
     static readonly KIND = RemoveFeedbackEdgeAction.KIND;
 
     execute(context: CommandExecutionContext): CommandReturn {
-        removeFeedbackEdge(context.root);
+        removeDanglingFeedbackEdge(context.root);
         return context.root;
     }
 }
@@ -118,80 +114,6 @@ export class FeedbackEdgeEnd extends SDanglingAnchor {
     }
 }
 
-export class FeedbackEdgeEndMovingMouseListener extends MouseListener {
-    constructor(protected anchorRegistry: AnchorComputerRegistry) {
-        super();
-    }
-
-    override mouseMove(target: SModelElement, event: MouseEvent): Action[] {
-        const root = target.root;
-        const edgeEnd = root.index.getById(feedbackEdgeEndId(root));
-        if (!(edgeEnd instanceof FeedbackEdgeEnd) || !edgeEnd.feedbackEdge) {
-            return [];
-        }
-
-        const edge = edgeEnd.feedbackEdge;
-        const position = getAbsolutePosition(edgeEnd, event);
-        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, Bounds.center(toAbsoluteBounds(edge.source)));
-            if (Point.euclideanDistance(anchor, edgeEnd.position) > 1) {
-                return [MoveAction.create([{ elementId: edgeEnd.id, toPosition: anchor }], { animate: false })];
-            }
-        } else {
-            return [MoveAction.create([{ elementId: edgeEnd.id, toPosition: position }], { animate: false })];
-        }
-
-        return [];
-    }
-
-    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, 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 = 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';
 }
@@ -243,7 +165,7 @@ export function drawFeedbackEdge(
     }
 }
 
-export function removeFeedbackEdge(root: SModelRoot): void {
+export function removeDanglingFeedbackEdge(root: SModelRoot): void {
     const feedbackEdge = root.index.getById(feedbackEdgeId(root));
     const feedbackEdgeEnd = root.index.getById(feedbackEdgeEndId(root));
     if (feedbackEdge instanceof SChildElement) {
@@ -253,3 +175,11 @@ export function removeFeedbackEdge(root: SModelRoot): void {
         root.remove(feedbackEdgeEnd);
     }
 }
+
+export function configureDanglingFeedbackEdge(context: BindingContext): void {
+    if (!context.isBound(DrawFeedbackEdgeCommand) && !context.isBound(RemoveFeedbackEdgeCommand) && !context.isBound(FeedbackEdgeEndView)) {
+        configureCommand(context, DrawFeedbackEdgeCommand);
+        configureCommand(context, RemoveFeedbackEdgeCommand);
+        configureView(context, FeedbackEdgeEnd.TYPE, FeedbackEdgeEndView);
+    }
+}

package/src/features/tools/edge-creation/edege-creation-module.ts

@@ -0,0 +1,25 @@
+/********************************************************************************
+ * Copyright (c) 2019-2023 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 { FeatureModule, TYPES, TriggerEdgeCreationAction, bindAsService, configureActionHandler } from '~glsp-sprotty';
+import { configureDanglingFeedbackEdge } from './dangling-edge-feedback';
+import { EdgeCreationTool } from './edge-creation-tool';
+
+export const edgeCreationToolModule = new FeatureModule((bind, unbind, isBound, rebind) => {
+    const context = { bind, unbind, isBound, rebind };
+    bindAsService(context, TYPES.ITool, EdgeCreationTool);
+    configureActionHandler(context, TriggerEdgeCreationAction.KIND, EdgeCreationTool);
+    configureDanglingFeedbackEdge(context);
+});

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

@@ -0,0 +1,89 @@
+/********************************************************************************
+ * Copyright (c) 2019-2023 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 {
+    Action,
+    AnchorComputerRegistry,
+    Bounds,
+    Disposable,
+    MouseListener,
+    MoveAction,
+    Point,
+    PolylineEdgeRouter,
+    SConnectableElement,
+    SModelElement,
+    findChildrenAtPosition,
+    findParentByFeature,
+    isBoundsAware,
+    isConnectable
+} from '~glsp-sprotty';
+import { IFeedbackActionDispatcher } from '../../../base/feedback/feedback-action-dispatcher';
+import { absoluteToParent, getAbsolutePosition, toAbsoluteBounds } from '../../../utils/viewpoint-util';
+import { FeedbackEdgeEnd, feedbackEdgeEndId } from './dangling-edge-feedback';
+
+export class FeedbackEdgeEndMovingMouseListener extends MouseListener implements Disposable {
+    constructor(protected anchorRegistry: AnchorComputerRegistry, protected feedbackDispatcher: IFeedbackActionDispatcher) {
+        super();
+    }
+
+    override mouseMove(target: SModelElement, event: MouseEvent): Action[] {
+        const root = target.root;
+        const edgeEnd = root.index.getById(feedbackEdgeEndId(root));
+        if (!(edgeEnd instanceof FeedbackEdgeEnd) || !edgeEnd.feedbackEdge) {
+            return [];
+        }
+
+        const edge = edgeEnd.feedbackEdge;
+        const position = getAbsolutePosition(edgeEnd, event);
+        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, Bounds.center(toAbsoluteBounds(edge.source)));
+            if (Point.euclideanDistance(anchor, edgeEnd.position) > 1) {
+                this.feedbackDispatcher.registerFeedback(this, [
+                    MoveAction.create([{ elementId: edgeEnd.id, toPosition: anchor }], { animate: false })
+                ]);
+            }
+        } else {
+            this.feedbackDispatcher.registerFeedback(this, [
+                MoveAction.create([{ elementId: edgeEnd.id, toPosition: position }], { animate: false })
+            ]);
+        }
+
+        return [];
+    }
+
+    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, 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 = Point.add(absoluteParentPosition, anchor);
+            }
+        }
+        return anchor;
+    }
+
+    dispose(): void {
+        this.feedbackDispatcher.deregisterFeedback(this);
+    }
+}

package/src/features/tools/{edge-creation-tool.ts → edge-creation/edge-creation-tool.ts}

@@ -19,8 +19,6 @@ import {
     AnchorComputerRegistry,
     CreateEdgeOperation,
     EnableDefaultToolsAction,
-    EnableToolsAction,
-    IActionHandler,
     SEdge,
     SModelElement,
     TriggerEdgeCreationAction,
@@ -28,54 +26,39 @@ import {
     isConnectable,
     isCtrlOrCmd
 } from '~glsp-sprotty';
-import { DragAwareMouseListener } from '../../base/drag-aware-mouse-listener';
-import {
-    DrawFeedbackEdgeAction,
-    FeedbackEdgeEndMovingMouseListener,
-    RemoveFeedbackEdgeAction
-} from '../tool-feedback/creation-tool-feedback';
-import { CursorCSS, cursorFeedbackAction } from '../tool-feedback/css-feedback';
-import { BaseGLSPTool } from './base-glsp-tool';
+import { DragAwareMouseListener } from '../../../base/drag-aware-mouse-listener';
+
+import { CursorCSS, cursorFeedbackAction } from '../../../base/feedback/css-feedback';
+import { BaseGLSPCreationTool } from '../base-glsp-creation-tool';
+import { DrawFeedbackEdgeAction, RemoveFeedbackEdgeAction } from './dangling-edge-feedback';
+import { FeedbackEdgeEndMovingMouseListener } from './edge-creation-tool-feedback';
 
 /**
  * Tool to create connections in a Diagram, by selecting a source and target node.
  */
 @injectable()
-export class EdgeCreationTool extends BaseGLSPTool implements IActionHandler {
+export class EdgeCreationTool extends BaseGLSPCreationTool<TriggerEdgeCreationAction> {
     static ID = 'tool_create_edge';
 
     @inject(AnchorComputerRegistry) protected anchorRegistry: AnchorComputerRegistry;
 
-    protected triggerAction: TriggerEdgeCreationAction;
-    protected creationToolMouseListener: EdgeCreationToolMouseListener;
-    protected feedbackEndMovingMouseListener: FeedbackEdgeEndMovingMouseListener;
+    protected isTriggerAction = TriggerEdgeCreationAction.is;
 
     get id(): string {
         return EdgeCreationTool.ID;
     }
 
-    enable(): void {
-        if (this.triggerAction === undefined) {
-            throw new TypeError(`Could not enable tool ${this.id}.The triggerAction cannot be undefined.`);
-        }
-        this.creationToolMouseListener = new EdgeCreationToolMouseListener(this.triggerAction, this);
-        this.mouseTool.register(this.creationToolMouseListener);
-        this.feedbackEndMovingMouseListener = new FeedbackEdgeEndMovingMouseListener(this.anchorRegistry);
-        this.mouseTool.register(this.feedbackEndMovingMouseListener);
-        this.dispatchFeedback([cursorFeedbackAction(CursorCSS.OPERATION_NOT_ALLOWED)]);
-    }
-
-    disable(): void {
-        this.mouseTool.deregister(this.creationToolMouseListener);
-        this.mouseTool.deregister(this.feedbackEndMovingMouseListener);
-        this.deregisterFeedback([RemoveFeedbackEdgeAction.create(), cursorFeedbackAction()]);
-    }
-
-    handle(action: Action): Action | void {
-        if (TriggerEdgeCreationAction.is(action)) {
-            this.triggerAction = action;
-            return EnableToolsAction.create([this.id]);
-        }
+    doEnable(): void {
+        const mouseMovingFeedback = new FeedbackEdgeEndMovingMouseListener(this.anchorRegistry, this.feedbackDispatcher);
+        this.toDisposeOnDisable.push(
+            mouseMovingFeedback,
+            this.mouseTool.registerListener(new EdgeCreationToolMouseListener(this.triggerAction, this)),
+            this.mouseTool.registerListener(mouseMovingFeedback),
+            this.registerFeedback([cursorFeedbackAction(CursorCSS.OPERATION_NOT_ALLOWED)], this, [
+                RemoveFeedbackEdgeAction.create(),
+                cursorFeedbackAction()
+            ])
+        );
     }
 }
 
@@ -98,7 +81,7 @@ export class EdgeCreationToolMouseListener extends DragAwareMouseListener {
         this.target = undefined;
         this.currentTarget = undefined;
         this.allowedTarget = false;
-        this.tool.dispatchFeedback([RemoveFeedbackEdgeAction.create()]);
+        this.tool.registerFeedback([RemoveFeedbackEdgeAction.create()]);
     }
 
     override nonDraggingMouseUp(_element: SModelElement, event: MouseEvent): Action[] {
@@ -107,7 +90,7 @@ export class EdgeCreationToolMouseListener extends DragAwareMouseListener {
             if (!this.isSourceSelected()) {
                 if (this.currentTarget && this.allowedTarget) {
                     this.source = this.currentTarget.id;
-                    this.tool.dispatchFeedback([
+                    this.tool.registerFeedback([
                         DrawFeedbackEdgeAction.create({ elementTypeId: this.triggerAction.elementTypeId, sourceId: this.source })
                     ]);
                 }
@@ -117,6 +100,11 @@ export class EdgeCreationToolMouseListener extends DragAwareMouseListener {
                 }
             }
             if (this.source && this.target) {
+                if (!isCtrlOrCmd(event)) {
+                    result.push(EnableDefaultToolsAction.create());
+                } else {
+                    this.reinitialize();
+                }
                 result.push(
                     CreateEdgeOperation.create({
                         elementTypeId: this.triggerAction.elementTypeId,
@@ -125,11 +113,6 @@ export class EdgeCreationToolMouseListener extends DragAwareMouseListener {
                         args: this.triggerAction.args
                     })
                 );
-                if (!isCtrlOrCmd(event)) {
-                    result.push(EnableDefaultToolsAction.create());
-                } else {
-                    this.reinitialize();
-                }
             }
         } else if (event.button === 2) {
             result.push(EnableDefaultToolsAction.create());

package/src/features/tools/edge-creation/view.tsx

@@ -0,0 +1,33 @@
+/********************************************************************************
+ * Copyright (c) 2019-2023 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 { injectable } from 'inversify';
+import { VNode } from 'snabbdom';
+import { IView, Point, RenderingContext, SModelElement, svg } from '~glsp-sprotty';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const JSX = { createElement: svg };
+
+/**
+ * This view is used for the invisible end of the feedback edge.
+ * A feedback edge is shown as a visual feedback when creating edges.
+ */
+@injectable()
+export class FeedbackEdgeEndView implements IView {
+    render(model: Readonly<SModelElement>, context: RenderingContext): VNode {
+        const position: Point = (model as any).position ?? Point.ORIGIN;
+        return <g x={position.x} y={position.y} />;
+    }
+}

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

@@ -0,0 +1,38 @@
+/********************************************************************************
+ * Copyright (c) 2019-2023 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 { FeatureModule, TYPES, bindAsService, configureCommand } from '~glsp-sprotty';
+import { configureDanglingFeedbackEdge } from '../edge-creation/dangling-edge-feedback';
+import { EdgeEditTool } from './edge-edit-tool';
+import {
+    DrawFeedbackEdgeSourceCommand,
+    HideEdgeReconnectHandlesFeedbackCommand,
+    ShowEdgeReconnectHandlesFeedbackCommand,
+    SwitchRoutingModeCommand
+} from './edge-edit-tool-feedback';
+
+export const edgeEditToolModule = new FeatureModule((bind, unbind, isBound, rebind) => {
+    const context = { bind, unbind, isBound, rebind };
+    bindAsService(context, TYPES.IDefaultTool, EdgeEditTool);
+
+    // reconnect edge tool feedback
+    configureCommand(context, ShowEdgeReconnectHandlesFeedbackCommand);
+    configureCommand(context, HideEdgeReconnectHandlesFeedbackCommand);
+    configureCommand(context, DrawFeedbackEdgeSourceCommand);
+    configureCommand(context, SwitchRoutingModeCommand);
+
+    // dangling edge feedback
+    configureDanglingFeedbackEdge(context);
+});

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

@@ -21,6 +21,7 @@ import {
     Bounds,
     CommandExecutionContext,
     CommandReturn,
+    Disposable,
     EdgeRouterRegistry,
     ElementMove,
     ISnapper,
@@ -41,12 +42,14 @@ import {
     isConnectable,
     isSelected
 } from '~glsp-sprotty';
-import { forEachElement, isRoutable, isRoutingHandle } from '../../utils/smodel-util';
-import { getAbsolutePosition, toAbsoluteBounds } from '../../utils/viewpoint-util';
-import { PointPositionUpdater } from '../change-bounds/snap';
-import { addReconnectHandles, removeReconnectHandles } from '../reconnect/model';
-import { FeedbackEdgeEnd, FeedbackEdgeEndMovingMouseListener, feedbackEdgeEndId, feedbackEdgeId } from './creation-tool-feedback';
-import { FeedbackCommand } from './model';
+import { IFeedbackActionDispatcher } from '../../../base/feedback/feedback-action-dispatcher';
+import { FeedbackCommand } from '../../../base/feedback/feedback-command';
+import { forEachElement, isRoutable, isRoutingHandle } from '../../../utils/smodel-util';
+import { getAbsolutePosition, toAbsoluteBounds } from '../../../utils/viewpoint-util';
+import { PointPositionUpdater } from '../../change-bounds/snap';
+import { addReconnectHandles, removeReconnectHandles } from '../../reconnect/model';
+import { FeedbackEdgeEnd, feedbackEdgeEndId, feedbackEdgeId } from '../edge-creation/dangling-edge-feedback';
+import { FeedbackEdgeEndMovingMouseListener } from '../edge-creation/edge-creation-tool-feedback';
 
 /**
  * RECONNECT HANDLES FEEDBACK
@@ -67,6 +70,7 @@ export namespace ShowEdgeReconnectHandlesFeedbackAction {
         return { kind: KIND, elementId };
     }
 }
+
 export interface HideEdgeReconnectHandlesFeedbackAction extends Action {
     kind: typeof HideEdgeReconnectHandlesFeedbackAction.KIND;
 }
@@ -135,6 +139,7 @@ export namespace SwitchRoutingModeAction {
         };
     }
 }
+
 @injectable()
 export class SwitchRoutingModeCommand extends SwitchEditModeCommand {
     static override KIND = SwitchRoutingModeAction.KIND;
@@ -187,13 +192,13 @@ export class DrawFeedbackEdgeSourceCommand extends FeedbackCommand {
  */
 
 export class FeedbackEdgeTargetMovingMouseListener extends FeedbackEdgeEndMovingMouseListener {
-    constructor(protected override anchorRegistry: AnchorComputerRegistry) {
-        super(anchorRegistry);
+    constructor(anchorRegistry: AnchorComputerRegistry, feedbackDispatcher: IFeedbackActionDispatcher) {
+        super(anchorRegistry, feedbackDispatcher);
     }
 }
 
-export class FeedbackEdgeSourceMovingMouseListener extends MouseListener {
-    constructor(protected anchorRegistry: AnchorComputerRegistry) {
+export class FeedbackEdgeSourceMovingMouseListener extends MouseListener implements Disposable {
+    constructor(protected anchorRegistry: AnchorComputerRegistry, protected feedbackDispatcher: IFeedbackActionDispatcher) {
         super();
     }
 
@@ -207,16 +212,20 @@ export class FeedbackEdgeSourceMovingMouseListener extends MouseListener {
         const edge = edgeEnd.feedbackEdge;
         const position = getAbsolutePosition(edgeEnd, event);
         const endAtMousePosition = findChildrenAtPosition(target.root, position).find(
-            e => isConnectable(e) && e.canConnect(edge, 'source')
+            element => isConnectable(element) && element.canConnect(edge, 'source')
         );
 
         if (endAtMousePosition instanceof SConnectableElement && edge.target && isBoundsAware(edge.target)) {
             const anchor = this.computeAbsoluteAnchor(endAtMousePosition, Bounds.center(edge.target.bounds));
             if (Point.euclideanDistance(anchor, edgeEnd.position) > 1) {
-                return [MoveAction.create([{ elementId: edgeEnd.id, toPosition: anchor }], { animate: false })];
+                this.feedbackDispatcher.registerFeedback(this, [
+                    MoveAction.create([{ elementId: edgeEnd.id, toPosition: anchor }], { animate: false })
+                ]);
             }
         } else {
-            return [MoveAction.create([{ elementId: edgeEnd.id, toPosition: position }], { animate: false })];
+            this.feedbackDispatcher.registerFeedback(this, [
+                MoveAction.create([{ elementId: edgeEnd.id, toPosition: position }], { animate: false })
+            ]);
         }
 
         return [];
@@ -236,6 +245,10 @@ export class FeedbackEdgeSourceMovingMouseListener extends MouseListener {
         }
         return anchor;
     }
+
+    dispose(): void {
+        this.feedbackDispatcher.deregisterFeedback(this);
+    }
 }
 
 export class FeedbackEdgeRouteMovingMouseListener extends MouseListener {
@@ -341,8 +354,7 @@ export class FeedbackEdgeRouteMovingMouseListener extends MouseListener {
 /**
  * UTILITY FUNCTIONS
  */
-
-function drawFeedbackEdgeSource(context: CommandExecutionContext, targetId: string, elementTypeId: string): void {
+export function drawFeedbackEdgeSource(context: CommandExecutionContext, targetId: string, elementTypeId: string): void {
     const root = context.root;
     const targetChild = root.index.getById(targetId);
     if (!targetChild) {