@eclipse-glsp/client 2.3.0-next.322 → 2.3.0-next.366

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

@@ -13,40 +13,20 @@
  *
  * 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 { ResizeHandleLocation, addResizeHandles, isResizable, removeResizeHandles } from '../../change-bounds/model';
+import { ChangeBoundsManager } from './change-bounds-manager';
 
 export interface ShowChangeBoundsToolResizeFeedbackAction extends Action {
     kind: typeof ShowChangeBoundsToolResizeFeedbackAction.KIND;
 
     elementId: string;
+    resizeLocations?: ResizeHandleLocation[];
 }
 
 export namespace ShowChangeBoundsToolResizeFeedbackAction {
@@ -56,10 +36,16 @@ export namespace ShowChangeBoundsToolResizeFeedbackAction {
         return Action.hasKind(object, KIND) && hasStringProp(object, 'elementId');
     }
 
-    export function create(elementId: string): ShowChangeBoundsToolResizeFeedbackAction {
+    /** @deprecated Use the create method with the options object parameter instead and set the 'elementId' parameter. */
+    export function create(elementId: string): ShowChangeBoundsToolResizeFeedbackAction;
+    export function create(options: Omit<ShowChangeBoundsToolResizeFeedbackAction, 'kind'>): ShowChangeBoundsToolResizeFeedbackAction;
+    export function create(
+        options: Omit<ShowChangeBoundsToolResizeFeedbackAction, 'kind'> | string
+    ): ShowChangeBoundsToolResizeFeedbackAction {
+        const opts = typeof options === 'string' ? { elementId: options } : options;
         return {
             kind: KIND,
-            elementId
+            ...opts
         };
     }
 }
@@ -85,16 +71,20 @@ export class ShowChangeBoundsToolResizeFeedbackCommand extends FeedbackCommand {
     static readonly KIND = ShowChangeBoundsToolResizeFeedbackAction.KIND;
 
     @inject(TYPES.Action) protected action: ShowChangeBoundsToolResizeFeedbackAction;
+    @inject(ChangeBoundsManager) protected changeBoundsManager: ChangeBoundsManager;
 
     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);
+                addResizeHandles(
+                    resizeElement,
+                    this.action.resizeLocations ?? resizeElement.resizeLocations ?? this.changeBoundsManager.defaultResizeLocations()
+                );
             }
         }
         return context.root;
@@ -145,205 +135,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

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2019-2023 EclipseSource and others.
+ * Copyright (c) 2019-2024 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,15 +14,21 @@
  * 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 '../../../../css/change-bounds.css';
+import { GResizeHandle } from '../../change-bounds/model';
+import { ChangeBoundsManager } from './change-bounds-manager';
 import { ChangeBoundsTool } from './change-bounds-tool';
 import { HideChangeBoundsToolResizeFeedbackCommand, ShowChangeBoundsToolResizeFeedbackCommand } from './change-bounds-tool-feedback';
-import { SResizeHandleView } from './view';
+import { GResizeHandleView } 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);
-});
+export const changeBoundsToolModule = new FeatureModule(
+    (bind, unbind, isBound, rebind) => {
+        const context = { bind, unbind, isBound, rebind };
+        bind(ChangeBoundsManager).toSelf().inSingletonScope();
+        bindAsService(context, TYPES.IDefaultTool, ChangeBoundsTool);
+        configureCommand(context, ShowChangeBoundsToolResizeFeedbackCommand);
+        configureCommand(context, HideChangeBoundsToolResizeFeedbackCommand);
+        configureView(context, GResizeHandle.TYPE, GResizeHandleView);
+    },
+    { featureId: Symbol('changeBoundsTool') }
+);

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

@@ -0,0 +1,204 @@
+/********************************************************************************
+ * Copyright (c) 2019-2024 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, 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/feedback-emitter';
+import {
+    MoveableElement,
+    filter,
+    getElements,
+    isNonRoutableSelectedMovableBoundsAware,
+    removeDescendants
+} from '../../../utils/gmodel-util';
+import { GResizeHandle } from '../../change-bounds/model';
+import { ChangeBoundsTool } from './change-bounds-tool';
+import { MoveFinishedEventAction, MoveInitializedEventAction } from './change-bounds-tool-feedback';
+import { ChangeBoundsTracker, TrackedMove } from './change-bounds-tracker';
+
+/**
+ * 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 {
+    protected rootElement?: GModelRoot;
+    protected tracker: ChangeBoundsTracker;
+    protected elementId2startPos = new Map<string, Point>();
+
+    protected pendingMoveInitialized?: DebouncedFunc<() => void>;
+
+    protected moveInitializedFeedback: FeedbackEmitter;
+    protected moveFeedback: FeedbackEmitter;
+
+    constructor(protected tool: ChangeBoundsTool) {
+        super();
+        this.tracker = tool.createChangeBoundsTracker();
+        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.tracker.stopTracking();
+        return [];
+    }
+
+    protected initializeMove(target: GModelElement, event: MouseEvent): void {
+        if (target instanceof GResizeHandle) {
+            // avoid conflict with resize tool
+            return;
+        }
+        const moveable = findParentByFeature(target, this.isValidMoveable);
+        if (moveable !== undefined) {
+            this.tracker.startTracking();
+            this.scheduleMoveInitialized();
+        } else {
+            this.tracker.stopTracking();
+        }
+    }
+
+    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 GResizeHandle);
+    }
+
+    override nonDraggingMouseUp(element: GModelElement, event: MouseEvent): Action[] {
+        // should reset everything that may have happend on mouse down
+        this.moveInitializedFeedback.dispose();
+        this.tracker.stopTracking();
+        return [];
+    }
+
+    override draggingMouseMove(target: GModelElement, event: MouseEvent): Action[] {
+        super.draggingMouseMove(target, event);
+        if (this.tracker.isTracking()) {
+            return this.moveElements(target, event);
+        }
+        return [];
+    }
+
+    protected moveElements(target: GModelElement, event: MouseEvent): Action[] {
+        if (this.elementId2startPos.size === 0) {
+            this.initializeElementsToMove(target.root);
+        }
+        const elementsToMove = this.getElementsToMove(target);
+        const move = this.tracker.moveElements(elementsToMove, { snap: event, restrict: event });
+        if (move.elementMoves.length === 0) {
+            return [];
+        }
+        // cancel any pending move
+        this.pendingMoveInitialized?.cancel();
+        this.moveFeedback.add(this.createMoveAction(move), () => this.resetElementPositions(target));
+        this.addMoveFeedback(move, target, event);
+        this.tracker.updateTrackingPosition(move);
+        this.moveFeedback.submit();
+        return [];
+    }
+
+    protected createMoveAction(trackedMove: TrackedMove): Action {
+        // we never want to animate the move action as this interferes with the move feedback
+        return MoveAction.create(
+            trackedMove.elementMoves.map(move => ({ elementId: move.element.id, toPosition: move.toPosition })),
+            { animate: false }
+        );
+    }
+
+    protected addMoveFeedback(trackedMove: TrackedMove, ctx: GModelElement, event: MouseEvent): void {
+        this.tool.changeBoundsManager.addMoveFeedback(this.moveFeedback, trackedMove, ctx, event);
+    }
+
+    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 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.tracker.isTracking()) {
+            return [];
+        }
+        // only reset the move of invalid elements, the others will be handled by the change bounds tool itself
+        this.getElementsToMove(target)
+            .filter(element => this.tool.changeBoundsManager.isValid(element))
+            .forEach(element => this.elementId2startPos.delete(element.id));
+        this.dispose();
+        return [];
+    }
+
+    override dispose(): void {
+        this.pendingMoveInitialized?.cancel();
+        this.moveInitializedFeedback.dispose();
+        this.moveFeedback.dispose();
+        this.tracker.dispose();
+        this.elementId2startPos.clear();
+        super.dispose();
+    }
+}