@eclipse-glsp/client 2.2.0-next.328 → 2.2.0-next.330

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

@@ -13,35 +13,13 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-import {
-    Action,
-    CommandExecutionContext,
-    CommandReturn,
-    Disposable,
-    ElementMove,
-    GChildElement,
-    GModelElement,
-    GModelRoot,
-    MoveAction,
-    Point,
-    TYPES,
-    findParentByFeature,
-    hasStringProp,
-    isMoveable,
-    isSelectable
-} from '@eclipse-glsp/sprotty';
+import { Action, CommandExecutionContext, CommandReturn, TYPES, hasStringProp } from '@eclipse-glsp/sprotty';
 import { inject, injectable } from 'inversify';
 
-import { DebouncedFunc, debounce } from 'lodash';
-import { DragAwareMouseListener } from '../../../base/drag-aware-mouse-listener';
-import { CursorCSS, cursorFeedbackAction } from '../../../base/feedback/css-feedback';
 import { FeedbackCommand } from '../../../base/feedback/feedback-command';
 import { OptionalAction } from '../../../base/model/glsp-model-source';
 import { forEachElement } from '../../../utils/gmodel-util';
-import { SResizeHandle, addResizeHandles, isResizable, removeResizeHandles } from '../../change-bounds/model';
-import { createMovementRestrictionFeedback, removeMovementRestrictionFeedback } from '../../change-bounds/movement-restrictor';
-import { PointPositionUpdater } from '../../change-bounds/point-position-updater';
-import { ChangeBoundsTool } from './change-bounds-tool';
+import { addResizeHandles, isResizable, removeResizeHandles } from '../../change-bounds/model';
 
 export interface ShowChangeBoundsToolResizeFeedbackAction extends Action {
     kind: typeof ShowChangeBoundsToolResizeFeedbackAction.KIND;
@@ -89,13 +67,11 @@ export class ShowChangeBoundsToolResizeFeedbackCommand extends FeedbackCommand {
     execute(context: CommandExecutionContext): CommandReturn {
         const index = context.root.index;
 
-        forEachElement(index, isResizable, removeResizeHandles);
+        forEachElement(index, isResizable, element => element.id !== this.action.elementId && removeResizeHandles(element));
 
-        if (this.action.elementId) {
-            const resizeElement = index.getById(this.action.elementId);
-            if (resizeElement && isResizable(resizeElement)) {
-                addResizeHandles(resizeElement);
-            }
+        const resizeElement = index.getById(this.action.elementId);
+        if (resizeElement && isResizable(resizeElement)) {
+            addResizeHandles(resizeElement);
         }
         return context.root;
     }
@@ -145,205 +121,3 @@ export namespace MoveFinishedEventAction {
         return OptionalAction.mark({ kind: KIND });
     }
 }
-
-/**
- * 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 DragAwareMouseListener implements Disposable {
-    protected rootElement?: GModelRoot;
-    protected positionUpdater;
-    protected elementId2startPos = new Map<string, Point>();
-    protected pendingMoveInitialized?: DebouncedFunc<() => void>;
-    protected moveInitialized = false;
-
-    constructor(protected tool: ChangeBoundsTool) {
-        super();
-        this.positionUpdater = new PointPositionUpdater(tool.positionSnapper);
-    }
-
-    override mouseDown(target: GModelElement, event: MouseEvent): Action[] {
-        if (event.button === 0 && !(target instanceof SResizeHandle)) {
-            const moveable = findParentByFeature(target, isMoveable);
-            if (moveable !== undefined && !(target instanceof SResizeHandle)) {
-                this.positionUpdater.updateLastDragPosition(event);
-                this.scheduleMoveInitialized();
-            } else {
-                this.positionUpdater.resetPosition();
-            }
-            this._isMouseDrag = false;
-        }
-        return [];
-    }
-
-    protected scheduleMoveInitialized(): void {
-        this.moveInitialized = false;
-        this.pendingMoveInitialized?.cancel();
-        this.pendingMoveInitialized = debounce(() => {
-            this.tool.registerFeedback([MoveInitializedEventAction.create()], this);
-            this.pendingMoveInitialized = undefined;
-            this.moveInitialized = true;
-        }, 750);
-        this.pendingMoveInitialized();
-    }
-
-    override mouseMove(target: GModelElement, event: MouseEvent): Action[] {
-        const result: Action[] = [];
-        if (event.buttons === 0) {
-            this.mouseUp(target, event);
-        } else if (!this.positionUpdater.isLastDragPositionUndefined()) {
-            if (this.elementId2startPos.size === 0) {
-                this.collectStartPositions(target.root);
-            }
-            this._isMouseDrag = true;
-            const moveAction = this.getElementMoves(target, event, false);
-            if (moveAction) {
-                this.pendingMoveInitialized?.cancel();
-                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 {
-        const delta = this.positionUpdater.updatePosition(target, event);
-        if (!delta) {
-            return undefined;
-        }
-        const elementMoves: ElementMove[] = this.getElementMovesForDelta(target, delta, finished);
-        if (elementMoves.length > 0) {
-            return MoveAction.create(elementMoves, { animate: false, finished });
-        } else {
-            return undefined;
-        }
-    }
-
-    protected getElementMovesForDelta(target: GModelElement, delta: Point, finished: boolean): ElementMove[] {
-        const elementMoves: ElementMove[] = [];
-        this.elementId2startPos.forEach((startPosition, elementId) => {
-            const element = target.root.index.getById(elementId);
-            if (element) {
-                if (isMoveable(element)) {
-                    const targetPosition = Point.add(element.position, delta);
-                    const toPosition = this.validateMove(startPosition, targetPosition, element, finished);
-                    elementMoves.push({ elementId: element.id, fromPosition: element.position, 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;
-    }
-
-    override mouseEnter(target: GModelElement, event: MouseEvent): Action[] {
-        if (target instanceof GModelRoot && event.buttons === 0 && this.positionUpdater.isLastDragPositionUndefined()) {
-            this.mouseUp(target, event);
-        }
-        return [];
-    }
-
-    override nonDraggingMouseUp(element: GModelElement, event: MouseEvent): Action[] {
-        this.reset(true);
-        return [];
-    }
-
-    override draggingMouseUp(target: GModelElement, event: MouseEvent): Action[] {
-        const result: Action[] = [];
-        if (this.positionUpdater.isLastDragPositionUndefined()) {
-            this.reset(true);
-            return result;
-        } else {
-            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 resetMoveFeedback(): ElementMove[] {
-        const elementMoves: ElementMove[] = [];
-        this.elementId2startPos.forEach((startPosition, elementId) => {
-            const element = this.rootElement!.index.getById(elementId);
-            if (element) {
-                if (isMoveable(element)) {
-                    elementMoves.push({ elementId: element.id, fromPosition: element.position, toPosition: startPosition });
-                }
-            }
-        });
-        return elementMoves;
-    }
-
-    protected reset(resetFeedback = false): void {
-        this.pendingMoveInitialized?.cancel();
-        if (this.rootElement && resetFeedback) {
-            const elementMoves: ElementMove[] = this.resetMoveFeedback();
-            if (elementMoves.length > 0) {
-                const moveAction = MoveAction.create(elementMoves, { animate: false, finished: true });
-                this.tool.deregisterFeedback(this, [moveAction]);
-            }
-        } else if (resetFeedback && this.moveInitialized) {
-            this.tool.deregisterFeedback(this, [MoveFinishedEventAction.create()]);
-        }
-        this.positionUpdater.resetPosition();
-        this._isMouseDrag = false;
-        this.moveInitialized = false;
-        this.rootElement = undefined;
-        this.elementId2startPos.clear();
-    }
-
-    dispose(): void {
-        this.reset(true);
-    }
-}

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

@@ -14,6 +14,7 @@
  * 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 '../../../../css/change-bounds.css';
 import { SResizeHandle } from '../../change-bounds/model';
 import { ChangeBoundsTool } from './change-bounds-tool';
 import { HideChangeBoundsToolResizeFeedbackCommand, ShowChangeBoundsToolResizeFeedbackCommand } from './change-bounds-tool-feedback';

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

@@ -0,0 +1,254 @@
+/********************************************************************************
+ * 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, Disposable, ElementMove, GModelElement, GModelRoot, MoveAction, Point, findParentByFeature } from '@eclipse-glsp/sprotty';
+
+import { DebouncedFunc, debounce } from 'lodash';
+import { DragAwareMouseListener } from '../../../base/drag-aware-mouse-listener';
+import { CursorCSS, cursorFeedbackAction } from '../../../base/feedback/css-feedback';
+import { FeedbackEmitter } from '../../../base/feedback/feeback-emitter';
+import { MoveableElement, filter, getElements, isNonRoutableSelectedMovableBoundsAware, removeDescendants } from '../../../utils';
+import { PointPositionUpdater } from '../../change-bounds';
+import { SResizeHandle } from '../../change-bounds/model';
+import { createMovementRestrictionFeedback, removeMovementRestrictionFeedback } from '../../change-bounds/movement-restrictor';
+import { ChangeBoundsTool } from './change-bounds-tool';
+import { MoveFinishedEventAction, MoveInitializedEventAction } from './change-bounds-tool-feedback';
+
+export interface ValidatedElementMove extends ElementMove {
+    valid: boolean;
+}
+
+export namespace ValidatedElementMove {
+    export function isValid(move: ElementMove): boolean {
+        return (move as ValidatedElementMove).valid ?? true;
+    }
+}
+
+/**
+ * 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 DragAwareMouseListener implements Disposable {
+    protected rootElement?: GModelRoot;
+    protected positionUpdater;
+    protected elementId2startPos = new Map<string, Point>();
+
+    protected pendingMoveInitialized?: DebouncedFunc<() => void>;
+
+    protected moveInitializedFeedback: FeedbackEmitter;
+    protected moveFeedback: FeedbackEmitter;
+
+    constructor(protected tool: ChangeBoundsTool) {
+        super();
+        this.positionUpdater = new PointPositionUpdater(tool.positionSnapper);
+        this.moveInitializedFeedback = tool.createFeedbackEmitter();
+        this.moveFeedback = tool.createFeedbackEmitter();
+    }
+
+    override mouseDown(target: GModelElement, event: MouseEvent): Action[] {
+        super.mouseDown(target, event);
+        if (event.button === 0) {
+            this.initializeMove(target, event);
+            return [];
+        }
+        this.positionUpdater.resetPosition();
+        return [];
+    }
+
+    protected initializeMove(target: GModelElement, event: MouseEvent): void {
+        if (target instanceof SResizeHandle) {
+            // avoid conflict with resize tool
+            return;
+        }
+        const moveable = findParentByFeature(target, this.isValidMoveable);
+        if (moveable !== undefined) {
+            this.positionUpdater.updateLastDragPosition(event);
+            this.scheduleMoveInitialized();
+        } else {
+            this.positionUpdater.resetPosition();
+        }
+    }
+
+    protected scheduleMoveInitialized(): void {
+        this.pendingMoveInitialized?.cancel();
+        this.pendingMoveInitialized = debounce(() => {
+            this.moveInitialized();
+            this.pendingMoveInitialized = undefined;
+        }, 750);
+        this.pendingMoveInitialized();
+    }
+
+    protected moveInitializationTimeout(): number {
+        return 750;
+    }
+
+    protected moveInitialized(): void {
+        if (this.isMouseDown) {
+            this.moveInitializedFeedback
+                .add(MoveInitializedEventAction.create(), MoveFinishedEventAction.create())
+                .add(cursorFeedbackAction(CursorCSS.MOVE), cursorFeedbackAction(CursorCSS.DEFAULT))
+                .submit();
+        }
+    }
+
+    protected isValidMoveable(element?: GModelElement): element is MoveableElement {
+        return !!element && isNonRoutableSelectedMovableBoundsAware(element) && !(element instanceof SResizeHandle);
+    }
+
+    override nonDraggingMouseUp(element: GModelElement, event: MouseEvent): Action[] {
+        // should reset everything that may have happend on mouse down
+        this.moveInitializedFeedback.dispose();
+        this.positionUpdater.resetPosition();
+        return [];
+    }
+
+    override mouseMove(target: GModelElement, event: MouseEvent): Action[] {
+        super.mouseMove(target, event);
+        if (event.buttons === 0) {
+            return this.mouseUp(target, event);
+        } else if (!this.positionUpdater.isLastDragPositionUndefined()) {
+            return this.moveElements(target, event);
+        }
+        return [];
+    }
+
+    protected moveElements(target: GModelElement, event: MouseEvent): Action[] {
+        if (this.elementId2startPos.size === 0) {
+            this.initializeElementsToMove(target.root);
+        }
+        const moveAction = this.getElementMoves(target, event, false);
+        if (!moveAction) {
+            return [];
+        }
+        // cancel any pending move
+        this.pendingMoveInitialized?.cancel();
+        this.moveFeedback.add(moveAction, () => this.resetElementPositions(target));
+        this.addMovementFeedback(moveAction, target);
+        this.moveFeedback.submit();
+        return [];
+    }
+
+    protected addMovementFeedback(movement: MoveAction, ctx: GModelElement): void {
+        // cursor feedback
+        this.moveFeedback.add(cursorFeedbackAction(CursorCSS.MOVE), cursorFeedbackAction(CursorCSS.DEFAULT));
+
+        // restriction feedback
+        movement.moves.forEach(move => {
+            const element = ctx.root.index.getById(move.elementId);
+            if (element && this.tool.movementRestrictor) {
+                if (!ValidatedElementMove.isValid(move)) {
+                    this.moveFeedback.add(createMovementRestrictionFeedback(element, this.tool.movementRestrictor), () =>
+                        removeMovementRestrictionFeedback(element, this.tool.movementRestrictor!)
+                    );
+                } else {
+                    this.moveFeedback.add(removeMovementRestrictionFeedback(element, this.tool.movementRestrictor));
+                }
+            }
+        });
+    }
+
+    protected initializeElementsToMove(root: GModelRoot): void {
+        const elementsToMove = this.collectElementsToMove(root);
+        elementsToMove.forEach(element => this.elementId2startPos.set(element.id, element.position));
+    }
+
+    protected collectElementsToMove(root: GModelRoot): MoveableElement[] {
+        const moveableElements = filter(root.index, this.isValidMoveable);
+        const topLevelElements = removeDescendants(moveableElements);
+        return Array.from(topLevelElements);
+    }
+
+    protected getElementsToMove(context: GModelElement): MoveableElement[] {
+        return getElements(context.root.index, Array.from(this.elementId2startPos.keys()), this.isValidMoveable);
+    }
+
+    protected getElementMoves(target: GModelElement, event: MouseEvent, finished: boolean): MoveAction | undefined {
+        const delta = this.positionUpdater.updatePosition(target, event);
+        if (!delta) {
+            return undefined;
+        }
+        const elementMoves: ElementMove[] = this.getElementMovesForDelta(target, delta, finished).filter(move =>
+            this.filterElementMove(move)
+        );
+        if (elementMoves.length > 0) {
+            // we never want to animate the move action as this interferes with the move feedback
+            return MoveAction.create(elementMoves, { animate: false, finished });
+        } else {
+            return undefined;
+        }
+    }
+
+    protected filterElementMove(elementMove: ValidatedElementMove): boolean {
+        return !!elementMove.fromPosition && !Point.equals(elementMove.fromPosition, elementMove.toPosition);
+    }
+
+    protected getElementMovesForDelta(target: GModelElement, delta: Point, finished: boolean): ValidatedElementMove[] {
+        return this.getElementsToMove(target).flatMap<ValidatedElementMove>(element => {
+            const startPosition = this.elementId2startPos.get(element.id);
+            if (!startPosition) {
+                return [];
+            }
+            const targetPosition = Point.add(element.position, delta);
+            const valid = this.tool.movementRestrictor?.validate(element, targetPosition) ?? true;
+            return [this.createElementMove(element, targetPosition, valid, finished)];
+        });
+    }
+
+    protected createElementMove(element: MoveableElement, toPosition: Point, valid: boolean, finished: boolean): ValidatedElementMove {
+        // if we are finished and have an invalid move, we want to move the element back to its start position
+        return !valid && finished
+            ? { elementId: element.id, fromPosition: element.position, toPosition: element.position, valid }
+            : { elementId: element.id, fromPosition: element.position, toPosition, valid };
+    }
+
+    protected resetElementPositions(context: GModelElement): MoveAction | undefined {
+        const elementMoves: ElementMove[] = this.revertElementMoves(context);
+        return MoveAction.create(elementMoves, { animate: false, finished: true });
+    }
+
+    protected revertElementMoves(context?: GModelElement): ElementMove[] {
+        const elementMoves: ElementMove[] = [];
+        if (context?.root?.index) {
+            const movableElements = this.getElementsToMove(context);
+            movableElements.forEach(element =>
+                elementMoves.push({ elementId: element.id, toPosition: this.elementId2startPos.get(element.id)! })
+            );
+        }
+        return elementMoves;
+    }
+
+    override draggingMouseUp(target: GModelElement, event: MouseEvent): Action[] {
+        if (this.positionUpdater.isLastDragPositionUndefined()) {
+            return [];
+        }
+        // only reset the move of invalid elements, the others will be handled by the change bounds tool itself
+        const moves = this.getElementMovesForDelta(target, Point.ORIGIN, false);
+        moves.filter(move => move.valid).forEach(move => this.elementId2startPos.delete(move.elementId));
+        this.dispose();
+        return [];
+    }
+
+    override dispose(): void {
+        this.pendingMoveInitialized?.cancel();
+        this.moveInitializedFeedback.dispose();
+        this.moveFeedback.dispose();
+        this.positionUpdater.resetPosition();
+        this.elementId2startPos.clear();
+        super.dispose();
+    }
+}