@eclipse-glsp/client 1.1.0-next.fe0b297.182 → 2.0.0

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

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2019-2022 EclipseSource and others.
+ * 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
@@ -13,25 +13,29 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-import { Action, PaletteItem, RequestContextActions, RequestMarkersAction, SetContextActions } from '@eclipse-glsp/protocol';
 import { inject, injectable, postConstruct } from 'inversify';
 import {
     AbstractUIExtension,
-    EnableDefaultToolsAction,
-    EnableToolsAction,
+    Action,
     IActionHandler,
     ICommand,
-    IToolManager,
+    MarkersReason,
+    PaletteItem,
+    RequestContextActions,
+    RequestMarkersAction,
+    GModelRoot,
+    SetContextActions,
     SetUIExtensionVisibilityAction,
-    SModelRoot,
-    TYPES
-} from 'sprotty';
-import { codiconCSSClasses } from 'sprotty/lib/utils/codicon';
-import { matchesKeystroke } from 'sprotty/lib/utils/keyboard';
+    codiconCSSClasses,
+    matchesKeystroke
+} from '@eclipse-glsp/sprotty';
 import { GLSPActionDispatcher } from '../../base/action-dispatcher';
-import { EditModeListener, EditorContextService } from '../../base/editor-context-service';
-import { MouseDeleteTool } from '../tools/delete-tool';
-import { MarqueeMouseTool } from '../tools/marquee-mouse-tool';
+import { EditorContextService, IEditModeListener } from '../../base/editor-context-service';
+import { FocusTracker } from '../../base/focus/focus-tracker';
+import { IDiagramStartup } from '../../base/model/diagram-loader';
+import { EnableDefaultToolsAction, EnableToolsAction } from '../../base/tool-manager/tool';
+import { MouseDeleteTool } from '../tools/deletion/delete-tool';
+import { MarqueeMouseTool } from '../tools/marquee-selection/marquee-mouse-tool';
 
 const CLICKED_CSS_CLASS = 'clicked';
 const SEARCH_ICON_ID = 'search';
@@ -55,17 +59,22 @@ export namespace EnableToolPaletteAction {
     }
 }
 @injectable()
-export class ToolPalette extends AbstractUIExtension implements IActionHandler, EditModeListener {
+export class ToolPalette extends AbstractUIExtension implements IActionHandler, IEditModeListener, IDiagramStartup {
     static readonly ID = 'tool-palette';
 
-    @inject(TYPES.IActionDispatcher) protected readonly actionDispatcher: GLSPActionDispatcher;
-    @inject(TYPES.IToolManager) protected readonly toolManager: IToolManager;
-    @inject(EditorContextService) protected readonly editorContext: EditorContextService;
+    @inject(GLSPActionDispatcher)
+    protected actionDispatcher: GLSPActionDispatcher;
+
+    @inject(EditorContextService)
+    protected editorContext: EditorContextService;
+
+    @inject(FocusTracker)
+    protected focusTracker: FocusTracker;
 
     protected paletteItems: PaletteItem[];
     protected paletteItemsCopy: PaletteItem[] = [];
     protected bodyDiv?: HTMLElement;
-    protected lastActivebutton?: HTMLElement;
+    protected lastActiveButton?: HTMLElement;
     protected defaultToolsButton: HTMLElement;
     protected searchField: HTMLInputElement;
     modelRootId: string;
@@ -79,7 +88,7 @@ export class ToolPalette extends AbstractUIExtension implements IActionHandler,
 
     @postConstruct()
     postConstruct(): void {
-        this.editorContext.register(this);
+        this.editorContext.onEditModeChanged(change => this.editModeChanged(change.newValue, change.oldValue));
     }
 
     override initialize(): boolean {
@@ -89,13 +98,14 @@ export class ToolPalette extends AbstractUIExtension implements IActionHandler,
         return super.initialize();
     }
 
-    protected initializeContents(_containerElement: HTMLElement): void {
+    protected initializeContents(containerElement: HTMLElement): void {
         this.createHeader();
         this.createBody();
-        this.lastActivebutton = this.defaultToolsButton;
+        this.lastActiveButton = this.defaultToolsButton;
+        containerElement.setAttribute('aria-label', 'Tool-Palette');
     }
 
-    protected override onBeforeShow(_containerElement: HTMLElement, root: Readonly<SModelRoot>): void {
+    protected override onBeforeShow(_containerElement: HTMLElement, root: Readonly<GModelRoot>): void {
         this.modelRootId = root.id;
         this.containerElement.style.maxHeight = PALETTE_HEIGHT;
     }
@@ -172,7 +182,7 @@ export class ToolPalette extends AbstractUIExtension implements IActionHandler,
         this.containerElement.appendChild(headerCompartment);
     }
 
-    private createHeaderTools(): HTMLElement {
+    protected createHeaderTools(): HTMLElement {
         const headerTools = document.createElement('div');
         headerTools.classList.add('header-tools');
 
@@ -199,7 +209,9 @@ export class ToolPalette extends AbstractUIExtension implements IActionHandler,
         const button = createIcon('inspect');
         button.id = 'btn_default_tools';
         button.title = 'Enable selection tool';
-        button.onclick = this.onClickStaticToolButton(this.defaultToolsButton);
+        button.onclick = this.onClickStaticToolButton(button);
+        button.ariaLabel = button.title;
+        button.tabIndex = 1;
         return button;
     }
 
@@ -207,6 +219,8 @@ export class ToolPalette extends AbstractUIExtension implements IActionHandler,
         const deleteToolButton = createIcon('chrome-close');
         deleteToolButton.title = 'Enable deletion tool';
         deleteToolButton.onclick = this.onClickStaticToolButton(deleteToolButton, MouseDeleteTool.ID);
+        deleteToolButton.ariaLabel = deleteToolButton.title;
+        deleteToolButton.tabIndex = 1;
         return deleteToolButton;
     }
 
@@ -214,6 +228,8 @@ export class ToolPalette extends AbstractUIExtension implements IActionHandler,
         const marqueeToolButton = createIcon('screen-full');
         marqueeToolButton.title = 'Enable marquee tool';
         marqueeToolButton.onclick = this.onClickStaticToolButton(marqueeToolButton, MarqueeMouseTool.ID);
+        marqueeToolButton.ariaLabel = marqueeToolButton.title;
+        marqueeToolButton.tabIndex = 1;
         return marqueeToolButton;
     }
 
@@ -222,8 +238,11 @@ export class ToolPalette extends AbstractUIExtension implements IActionHandler,
         validateActionButton.title = 'Validate model';
         validateActionButton.onclick = _event => {
             const modelIds: string[] = [this.modelRootId];
-            this.actionDispatcher.dispatch(RequestMarkersAction.create(modelIds));
+            this.actionDispatcher.dispatch(RequestMarkersAction.create(modelIds, { reason: MarkersReason.BATCH }));
+            validateActionButton.focus();
         };
+        validateActionButton.ariaLabel = validateActionButton.title;
+        validateActionButton.tabIndex = 1;
         return validateActionButton;
     }
 
@@ -242,6 +261,8 @@ export class ToolPalette extends AbstractUIExtension implements IActionHandler,
         };
         searchIcon.classList.add('search-icon');
         searchIcon.title = 'Filter palette entries';
+        searchIcon.ariaLabel = searchIcon.title;
+        searchIcon.tabIndex = 1;
         return searchIcon;
     }
 
@@ -300,41 +321,27 @@ export class ToolPalette extends AbstractUIExtension implements IActionHandler,
     }
 
     changeActiveButton(button?: HTMLElement): void {
-        if (this.lastActivebutton) {
-            this.lastActivebutton.classList.remove(CLICKED_CSS_CLASS);
+        if (this.lastActiveButton) {
+            this.lastActiveButton.classList.remove(CLICKED_CSS_CLASS);
         }
         if (button) {
             button.classList.add(CLICKED_CSS_CLASS);
-            this.lastActivebutton = button;
-        } else {
+            this.lastActiveButton = button;
+        } else if (this.defaultToolsButton) {
             this.defaultToolsButton.classList.add(CLICKED_CSS_CLASS);
-            this.lastActivebutton = this.defaultToolsButton;
+            this.lastActiveButton = this.defaultToolsButton;
         }
     }
 
-    handle(action: Action): ICommand | Action | void {
-        if (action.kind === EnableToolPaletteAction.KIND) {
-            const requestAction = RequestContextActions.create({
-                contextId: ToolPalette.ID,
-                editorContext: {
-                    selectedElementIds: []
-                }
-            });
-            this.actionDispatcher.requestUntil(requestAction).then(response => {
-                if (SetContextActions.is(response)) {
-                    this.paletteItems = response.actions.map(e => e as PaletteItem);
-                    this.actionDispatcher.dispatch(
-                        SetUIExtensionVisibilityAction.create({ extensionId: ToolPalette.ID, visible: !this.editorContext.isReadonly })
-                    );
-                }
-            });
-        } else if (action.kind === EnableDefaultToolsAction.KIND) {
-            this.changeActiveButton();
-            this.restoreFocus();
+    handle(action: EnableDefaultToolsAction): ICommand | Action | void {
+        this.changeActiveButton();
+        if (this.focusTracker.hasFocus) {
+            // if focus was deliberately taken do not restore focus to the palette
+            this.focusTracker.diagramElement?.focus();
         }
     }
 
-    editModeChanged(_oldValue: string, _newValue: string): void {
+    editModeChanged(_newValue: string, _oldValue: string): void {
         this.actionDispatcher.dispatch(
             SetUIExtensionVisibilityAction.create({ extensionId: ToolPalette.ID, visible: !this.editorContext.isReadonly })
         );
@@ -386,6 +393,20 @@ export class ToolPalette extends AbstractUIExtension implements IActionHandler,
         this.paletteItems = filteredPaletteItems;
         this.createBody();
     }
+
+    async preRequestModel(): Promise<void> {
+        const requestAction = RequestContextActions.create({
+            contextId: ToolPalette.ID,
+            editorContext: {
+                selectedElementIds: []
+            }
+        });
+        const response = await this.actionDispatcher.request<SetContextActions>(requestAction);
+        this.paletteItems = response.actions.map(e => e as PaletteItem);
+        if (!this.editorContext.isReadonly) {
+            this.show(this.editorContext.modelRoot);
+        }
+    }
 }
 
 export function compare(a: PaletteItem, b: PaletteItem): number {

package/src/features/tools/base-tools.ts

@@ -0,0 +1,99 @@
+/********************************************************************************
+ * Copyright (c) 2020-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 { inject, injectable } from 'inversify';
+import { Action, Disposable, DisposableCollection, IActionHandler, TYPES } from '@eclipse-glsp/sprotty';
+import { GLSPActionDispatcher } from '../../base/action-dispatcher';
+import { EditorContextService } from '../../base/editor-context-service';
+import { IFeedbackActionDispatcher, IFeedbackEmitter } from '../../base/feedback/feedback-action-dispatcher';
+import { EnableToolsAction, Tool } from '../../base/tool-manager/tool';
+import { GLSPKeyTool } from '../../base/view/key-tool';
+import { GLSPMouseTool } from '../../base/view/mouse-tool';
+
+/**
+ *  A reusable base implementation for edit {@link Tool}s.
+ */
+@injectable()
+export abstract class BaseEditTool implements Tool {
+    @inject(TYPES.IFeedbackActionDispatcher) protected feedbackDispatcher: IFeedbackActionDispatcher;
+    @inject(TYPES.IActionDispatcher) protected actionDispatcher: GLSPActionDispatcher;
+    @inject(GLSPMouseTool) protected mouseTool: GLSPMouseTool;
+    @inject(GLSPKeyTool) protected keyTool: GLSPKeyTool;
+    @inject(EditorContextService) protected readonly editorContext: EditorContextService;
+
+    protected readonly toDisposeOnDisable = new DisposableCollection();
+
+    abstract enable(): void;
+
+    disable(): void {
+        this.toDisposeOnDisable.dispose();
+    }
+
+    abstract id: string;
+
+    get isEditTool(): boolean {
+        return true;
+    }
+
+    dispatchActions(actions: Action[]): void {
+        this.actionDispatcher.dispatchAll(actions);
+    }
+
+    /**
+     * Registers `actions` to be sent out as feedback, i.e., changes that are re-established whenever the `GModelRoot`
+     * has been set or updated.
+     *
+     * @param feedbackActions the actions to be sent out.
+     * @param feedbackEmitter the emitter sending out feedback actions (this tool by default).
+     * @param cleanupActions the actions to be sent out when the feedback is de-registered through the returned Disposable.
+     * @returns A 'Disposable' that de-registers the feedback and cleans up any pending feedback with the given `cleanupActions`.
+     */
+    registerFeedback(feedbackActions: Action[], feedbackEmitter?: IFeedbackEmitter, cleanupActions?: Action[]): Disposable {
+        return this.feedbackDispatcher.registerFeedback(feedbackEmitter ?? this, feedbackActions, cleanupActions);
+    }
+
+    /**
+     * De-registers all feedback from the given `feedbackEmitter` (this tool by default) and cleans up any pending feedback with the
+     * given `cleanupActions`.
+     *
+     * @param feedbackEmitter the emitter to be deregistered (this tool by default).
+     * @param cleanupActions the actions to be dispatched right after the deregistration to clean up any pending feedback.
+     */
+    deregisterFeedback(feedbackEmitter?: IFeedbackEmitter, cleanupActions?: Action[]): void {
+        this.feedbackDispatcher.deregisterFeedback(feedbackEmitter ?? this, cleanupActions);
+    }
+}
+
+@injectable()
+export abstract class BaseCreationTool<T extends Action> extends BaseEditTool implements IActionHandler {
+    protected abstract isTriggerAction: (obj: any) => obj is T;
+    protected triggerAction: T;
+
+    handle(action: Action): Action | void {
+        if (this.isTriggerAction(action)) {
+            this.triggerAction = action;
+            return EnableToolsAction.create([this.id]);
+        }
+    }
+
+    override enable(): void {
+        if (this.triggerAction === undefined) {
+            throw new TypeError(`Could not enable tool ${this.id}. The triggerAction cannot be undefined.`);
+        }
+        this.doEnable();
+    }
+
+    protected abstract doEnable(): void;
+}

package/src/features/tools/change-bounds/change-boounds-tool-module.ts

@@ -0,0 +1,28 @@
+/********************************************************************************
+ * 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, configureView } from '@eclipse-glsp/sprotty';
+import { SResizeHandle } from '../../change-bounds/model';
+import { ChangeBoundsTool } from './change-bounds-tool';
+import { HideChangeBoundsToolResizeFeedbackCommand, ShowChangeBoundsToolResizeFeedbackCommand } from './change-bounds-tool-feedback';
+import { SResizeHandleView } from './view';
+
+export const changeBoundsToolModule = new FeatureModule((bind, unbind, isBound, rebind) => {
+    const context = { bind, unbind, isBound, rebind };
+    bindAsService(context, TYPES.IDefaultTool, ChangeBoundsTool);
+    configureCommand(context, ShowChangeBoundsToolResizeFeedbackCommand);
+    configureCommand(context, HideChangeBoundsToolResizeFeedbackCommand);
+    configureView(context, SResizeHandle.TYPE, SResizeHandleView);
+});

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

@@ -0,0 +1,314 @@
+/********************************************************************************
+ * 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 { inject, injectable } from 'inversify';
+import { VNode } from 'snabbdom';
+import {
+    Action,
+    CommandExecutionContext,
+    CommandReturn,
+    Disposable,
+    ElementMove,
+    GChildElement,
+    MouseListener,
+    MoveAction,
+    Point,
+    GModelElement,
+    GModelRoot,
+    TYPES,
+    findParentByFeature,
+    hasStringProp,
+    isMoveable,
+    isSelectable,
+    isViewport
+} from '@eclipse-glsp/sprotty';
+
+import { CursorCSS, cursorFeedbackAction } from '../../../base/feedback/css-feedback';
+import { FeedbackCommand } from '../../../base/feedback/feedback-command';
+import { forEachElement } from '../../../utils/gmodel-util';
+import { SResizeHandle, addResizeHandles, isResizable, removeResizeHandles } from '../../change-bounds/model';
+import { createMovementRestrictionFeedback, removeMovementRestrictionFeedback } from '../../change-bounds/movement-restrictor';
+import { ChangeBoundsTool } from './change-bounds-tool';
+
+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 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 = ShowChangeBoundsToolResizeFeedbackAction.KIND;
+
+    @inject(TYPES.Action) protected action: ShowChangeBoundsToolResizeFeedbackAction;
+
+    execute(context: CommandExecutionContext): CommandReturn {
+        const index = context.root.index;
+
+        forEachElement(index, isResizable, removeResizeHandles);
+
+        if (this.action.elementId) {
+            const resizeElement = index.getById(this.action.elementId);
+            if (resizeElement && isResizable(resizeElement)) {
+                addResizeHandles(resizeElement);
+            }
+        }
+        return context.root;
+    }
+}
+
+@injectable()
+export class HideChangeBoundsToolResizeFeedbackCommand extends FeedbackCommand {
+    static readonly KIND = HideChangeBoundsToolResizeFeedbackAction.KIND;
+
+    @inject(TYPES.Action) protected action: HideChangeBoundsToolResizeFeedbackAction;
+
+    execute(context: CommandExecutionContext): CommandReturn {
+        const index = context.root.index;
+        forEachElement(index, isResizable, removeResizeHandles);
+        return context.root;
+    }
+}
+
+/**
+ * This mouse listener provides visual feedback for moving by sending client-side
+ * `MoveAction`s while elements are selected and dragged. This will also update
+ * their bounds, which is important, as it is not only required for rendering
+ * the visual feedback but also the basis for sending the change to the server
+ * (see also `tools/MoveTool`).
+ */
+export class FeedbackMoveMouseListener extends MouseListener implements Disposable {
+    protected hasDragged = false;
+    protected rootElement?: GModelRoot;
+    protected startDragPosition?: Point;
+    protected elementId2startPos = new Map<string, Point>();
+
+    constructor(protected tool: ChangeBoundsTool) {
+        super();
+    }
+
+    override mouseDown(target: GModelElement, event: MouseEvent): Action[] {
+        if (event.button === 0 && !(target instanceof SResizeHandle)) {
+            const moveable = findParentByFeature(target, isMoveable);
+            if (moveable !== undefined) {
+                this.startDragPosition = { x: event.pageX, y: event.pageY };
+            } else {
+                this.startDragPosition = undefined;
+            }
+            this.hasDragged = false;
+        }
+        return [];
+    }
+
+    override mouseMove(target: GModelElement, event: MouseEvent): Action[] {
+        const result: Action[] = [];
+        if (event.buttons === 0) {
+            this.mouseUp(target, event);
+        } else if (this.startDragPosition) {
+            if (this.elementId2startPos.size === 0) {
+                this.collectStartPositions(target.root);
+            }
+            this.hasDragged = true;
+            const moveAction = this.getElementMoves(target, event, false);
+            if (moveAction) {
+                result.push(moveAction);
+                result.push(cursorFeedbackAction(CursorCSS.MOVE));
+            }
+        }
+        this.tool.registerFeedback(result, this);
+        return [];
+    }
+
+    protected collectStartPositions(root: GModelRoot): void {
+        this.rootElement = root;
+        const selectedElements = root.index.all().filter(element => isSelectable(element) && element.selected);
+        const elementsSet = new Set(selectedElements);
+        selectedElements
+            .filter(element => !this.isChildOfSelected(elementsSet, element))
+            .forEach(element => {
+                if (isMoveable(element)) {
+                    this.elementId2startPos.set(element.id, element.position);
+                }
+            });
+    }
+
+    protected isChildOfSelected(selectedElements: Set<GModelElement>, element: GModelElement): boolean {
+        while (element instanceof GChildElement) {
+            element = element.parent;
+            if (selectedElements.has(element)) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    protected getElementMoves(target: GModelElement, event: MouseEvent, finished: boolean): MoveAction | undefined {
+        if (!this.startDragPosition) {
+            return undefined;
+        }
+
+        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: GModelElement,
+        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) {
+                let toPosition = this.snap(
+                    {
+                        x: startPosition.x + delta.x,
+                        y: startPosition.y + delta.y
+                    },
+                    element,
+                    isSnap
+                );
+
+                if (isMoveable(element)) {
+                    toPosition = this.validateMove(startPosition, toPosition, element, finished);
+                    elementMoves.push({
+                        elementId: element.id,
+                        fromPosition: {
+                            x: element.position.x,
+                            y: element.position.y
+                        },
+                        toPosition
+                    });
+                }
+            }
+        });
+        return elementMoves;
+    }
+
+    protected validateMove(startPosition: Point, toPosition: Point, element: GModelElement, isFinished: boolean): Point {
+        let newPosition = toPosition;
+        if (this.tool.movementRestrictor) {
+            const valid = this.tool.movementRestrictor.validate(element, toPosition);
+            let action;
+            if (!valid) {
+                action = createMovementRestrictionFeedback(element, this.tool.movementRestrictor);
+
+                if (isFinished) {
+                    newPosition = startPosition;
+                }
+            } else {
+                action = removeMovementRestrictionFeedback(element, this.tool.movementRestrictor);
+            }
+            this.tool.registerFeedback([action], this);
+        }
+        return newPosition;
+    }
+
+    protected snap(position: Point, element: GModelElement, isSnap: boolean): Point {
+        if (isSnap && this.tool.snapper) {
+            return this.tool.snapper.snap(position, element);
+        } else {
+            return position;
+        }
+    }
+
+    override mouseEnter(target: GModelElement, event: MouseEvent): Action[] {
+        if (target instanceof GModelRoot && event.buttons === 0 && !this.startDragPosition) {
+            this.mouseUp(target, event);
+        }
+        return [];
+    }
+
+    override mouseUp(target: GModelElement, event: MouseEvent): Action[] {
+        const result: Action[] = [];
+        if (this.startDragPosition) {
+            const moveAction = this.getElementMoves(target, event, true);
+            if (moveAction) {
+                result.push(moveAction);
+            }
+            const resetFeedback: Action[] = [];
+            if (this.tool.movementRestrictor) {
+                resetFeedback.push(removeMovementRestrictionFeedback(target, this.tool.movementRestrictor));
+            }
+            resetFeedback.push(cursorFeedbackAction(CursorCSS.DEFAULT));
+            this.tool.deregisterFeedback(this, resetFeedback);
+        }
+        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(this, [moveAction]);
+        }
+        this.hasDragged = false;
+        this.startDragPosition = undefined;
+        this.rootElement = undefined;
+        this.elementId2startPos.clear();
+    }
+
+    override decorate(vnode: VNode, _element: GModelElement): VNode {
+        return vnode;
+    }
+
+    dispose(): void {
+        this.reset(true);
+    }
+}