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

package/src/features/helper-lines/helper-line-feedback.ts

@@ -27,6 +27,7 @@ import {
     Point,
     TYPES,
     Viewport,
+    equalUpTo,
     findParentByFeature,
     isBoundsAware,
     isDecoration,
@@ -36,25 +37,6 @@ import { inject, injectable } from 'inversify';
 import { partition } from 'lodash';
 import '../../../css/helper-lines.css';
 import { FeedbackCommand } from '../../base/feedback/feedback-command';
-import {
-    bottom,
-    bottomCenter,
-    bottomLeft,
-    bottomRight,
-    center,
-    isAbove,
-    isBefore,
-    left,
-    middle,
-    middleLeft,
-    middleRight,
-    right,
-    sortBy,
-    top,
-    topCenter,
-    topLeft,
-    topRight
-} from '../../utils/geometry-util';
 import {
     BoundsAwareModelElement,
     findTopLevelElementByFeature,
@@ -64,7 +46,7 @@ import {
     isVisibleOnCanvas
 } from '../../utils/gmodel-util';
 import { getViewportBounds, toAbsoluteBounds } from '../../utils/viewpoint-util';
-import { feedbackEdgeEndId, feedbackEdgeId } from '../tools';
+import { feedbackEdgeEndId, feedbackEdgeId } from '../tools/edge-creation/dangling-edge-feedback';
 import { HelperLine, HelperLineType, SelectionBounds, isHelperLine, isSelectionBounds } from './model';
 
 export type ViewportLineType = typeof HelperLineType.Center | typeof HelperLineType.Middle | string;
@@ -191,12 +173,12 @@ export class DrawHelperLinesFeedbackCommand extends FeedbackCommand {
         const helperLines: HelperLine[] = [];
         this.log('Find helperlines for viewport:', root);
         const viewportBounds = getViewportBounds(root, root.canvasBounds);
-        if (lineTypes.includes(HelperLineType.Center) && this.isAligned(center, viewportBounds, bounds, 2)) {
-            helperLines.push(new HelperLine(topCenter(viewportBounds), bottomCenter(viewportBounds), HelperLineType.Center));
+        if (lineTypes.includes(HelperLineType.Center) && this.isAligned(Bounds.centerX, viewportBounds, bounds, 2)) {
+            helperLines.push(new HelperLine(Bounds.topCenter(viewportBounds), Bounds.bottomCenter(viewportBounds), HelperLineType.Center));
             this.log('- Reference bounds center align with viewport.', viewportBounds);
         }
-        if (lineTypes.includes(HelperLineType.Middle) && this.isAligned(middle, viewportBounds, bounds, 2)) {
-            helperLines.push(new HelperLine(middleLeft(viewportBounds), middleRight(viewportBounds), HelperLineType.Middle));
+        if (lineTypes.includes(HelperLineType.Middle) && this.isAligned(Bounds.middle, viewportBounds, bounds, 2)) {
+            helperLines.push(new HelperLine(Bounds.middleLeft(viewportBounds), Bounds.middleRight(viewportBounds), HelperLineType.Middle));
             this.log('- Reference bounds middle align with viewport.', viewportBounds);
         }
         if (helperLines.length > 0) {
@@ -213,78 +195,90 @@ export class DrawHelperLinesFeedbackCommand extends FeedbackCommand {
     protected calcHelperLinesForBounds(elementBounds: Bounds, bounds: Bounds, lineTypes: HelperLineType[]): HelperLine[] {
         const helperLines: HelperLine[] = [];
 
-        if (lineTypes.includes(HelperLineType.Left) && this.isAligned(left, elementBounds, bounds, this.alignmentEpsilon)) {
-            const [above, below] = sortBy(top, elementBounds, bounds); // higher top-value ==> lower
-            helperLines.push(new HelperLine(bottomLeft(below), topLeft(above), HelperLineType.Left));
+        if (lineTypes.includes(HelperLineType.Left) && this.isAligned(Bounds.left, elementBounds, bounds, this.alignmentEpsilon)) {
+            const [above, below] = Bounds.sortBy(Bounds.top, elementBounds, bounds); // higher top-value ==> lower
+            helperLines.push(new HelperLine(Bounds.bottomLeft(below), Bounds.topLeft(above), HelperLineType.Left));
             this.log('- Reference bounds left align with element', elementBounds);
         }
 
-        if (lineTypes.includes(HelperLineType.Center) && this.isAligned(center, elementBounds, bounds, this.alignmentEpsilon)) {
-            const [above, below] = sortBy(top, elementBounds, bounds); // higher top-value ==> lower
-            helperLines.push(new HelperLine(topCenter(above), bottomCenter(below), HelperLineType.Center));
+        if (lineTypes.includes(HelperLineType.Center) && this.isAligned(Bounds.centerX, elementBounds, bounds, this.alignmentEpsilon)) {
+            const [above, below] = Bounds.sortBy(Bounds.top, elementBounds, bounds); // higher top-value ==> lower
+            helperLines.push(new HelperLine(Bounds.topCenter(above), Bounds.bottomCenter(below), HelperLineType.Center));
             this.log('- Reference bounds center align with element', elementBounds);
         }
 
-        if (lineTypes.includes(HelperLineType.Right) && this.isAligned(right, elementBounds, bounds, this.alignmentEpsilon)) {
-            const [above, below] = sortBy(top, elementBounds, bounds); // higher top-value ==> lower
-            helperLines.push(new HelperLine(bottomRight(below), topRight(above), HelperLineType.Right));
+        if (lineTypes.includes(HelperLineType.Right) && this.isAligned(Bounds.right, elementBounds, bounds, this.alignmentEpsilon)) {
+            const [above, below] = Bounds.sortBy(Bounds.top, elementBounds, bounds); // higher top-value ==> lower
+            helperLines.push(new HelperLine(Bounds.bottomRight(below), Bounds.topRight(above), HelperLineType.Right));
             this.log('- Reference bounds right align with element', elementBounds);
         }
 
-        if (lineTypes.includes(HelperLineType.Bottom) && this.isAligned(bottom, elementBounds, bounds, this.alignmentEpsilon)) {
-            const [before, after] = sortBy(left, elementBounds, bounds); // higher left-value ==> more to the right
-            helperLines.push(new HelperLine(bottomLeft(before), bottomRight(after), HelperLineType.Bottom));
+        if (lineTypes.includes(HelperLineType.Bottom) && this.isAligned(Bounds.bottom, elementBounds, bounds, this.alignmentEpsilon)) {
+            const [before, after] = Bounds.sortBy(Bounds.left, elementBounds, bounds); // higher left-value ==> more to the right
+            helperLines.push(new HelperLine(Bounds.bottomLeft(before), Bounds.bottomRight(after), HelperLineType.Bottom));
             this.log('- Reference bounds bottom align with element', elementBounds);
         }
 
-        if (lineTypes.includes(HelperLineType.Middle) && this.isAligned(middle, elementBounds, bounds, this.alignmentEpsilon)) {
-            const [before, after] = sortBy(left, elementBounds, bounds); // higher left-value ==> more to the right
-            helperLines.push(new HelperLine(middleLeft(before), middleRight(after), HelperLineType.Middle));
+        if (lineTypes.includes(HelperLineType.Middle) && this.isAligned(Bounds.centerY, elementBounds, bounds, this.alignmentEpsilon)) {
+            const [before, after] = Bounds.sortBy(Bounds.left, elementBounds, bounds); // higher left-value ==> more to the right
+            helperLines.push(new HelperLine(Bounds.middleLeft(before), Bounds.middleRight(after), HelperLineType.Middle));
             this.log('- Reference bounds middle align with element', elementBounds);
         }
 
-        if (lineTypes.includes(HelperLineType.Top) && this.isAligned(top, elementBounds, bounds, this.alignmentEpsilon)) {
-            const [before, after] = sortBy(left, elementBounds, bounds); // higher left-value ==> more to the right
-            helperLines.push(new HelperLine(topLeft(before), topRight(after), HelperLineType.Top));
+        if (lineTypes.includes(HelperLineType.Top) && this.isAligned(Bounds.top, elementBounds, bounds, this.alignmentEpsilon)) {
+            const [before, after] = Bounds.sortBy(Bounds.left, elementBounds, bounds); // higher left-value ==> more to the right
+            helperLines.push(new HelperLine(Bounds.topLeft(before), Bounds.topRight(after), HelperLineType.Top));
             this.log('- Reference bounds top align with element', elementBounds);
         }
 
-        if (lineTypes.includes(HelperLineType.LeftRight) && this.isMatch(left(elementBounds), right(bounds), this.alignmentEpsilon)) {
-            if (isAbove(bounds, elementBounds)) {
-                helperLines.push(new HelperLine(bottomLeft(elementBounds), topRight(bounds), HelperLineType.RightLeft));
+        if (
+            lineTypes.includes(HelperLineType.LeftRight) &&
+            this.isMatch(Bounds.left(elementBounds), Bounds.right(bounds), this.alignmentEpsilon)
+        ) {
+            if (Bounds.isAbove(bounds, elementBounds)) {
+                helperLines.push(new HelperLine(Bounds.bottomLeft(elementBounds), Bounds.topRight(bounds), HelperLineType.RightLeft));
                 this.log('- Reference bounds right aligns with element left', elementBounds);
             } else {
-                helperLines.push(new HelperLine(topLeft(elementBounds), bottomRight(bounds), HelperLineType.RightLeft));
+                helperLines.push(new HelperLine(Bounds.topLeft(elementBounds), Bounds.bottomRight(bounds), HelperLineType.RightLeft));
                 this.log('- Reference bounds right aligns with element left', elementBounds);
             }
         }
 
-        if (lineTypes.includes(HelperLineType.LeftRight) && this.isMatch(right(elementBounds), left(bounds), this.alignmentEpsilon)) {
-            if (isAbove(bounds, elementBounds)) {
-                helperLines.push(new HelperLine(bottomRight(elementBounds), topLeft(bounds), HelperLineType.LeftRight));
+        if (
+            lineTypes.includes(HelperLineType.LeftRight) &&
+            this.isMatch(Bounds.right(elementBounds), Bounds.left(bounds), this.alignmentEpsilon)
+        ) {
+            if (Bounds.isAbove(bounds, elementBounds)) {
+                helperLines.push(new HelperLine(Bounds.bottomRight(elementBounds), Bounds.topLeft(bounds), HelperLineType.LeftRight));
                 this.log('- Reference bounds left aligns with element right', elementBounds);
             } else {
-                helperLines.push(new HelperLine(topRight(elementBounds), bottomLeft(bounds), HelperLineType.LeftRight));
+                helperLines.push(new HelperLine(Bounds.topRight(elementBounds), Bounds.bottomLeft(bounds), HelperLineType.LeftRight));
                 this.log('- Reference bounds left aligns with element right', elementBounds);
             }
         }
 
-        if (lineTypes.includes(HelperLineType.TopBottom) && this.isMatch(top(elementBounds), bottom(bounds), this.alignmentEpsilon)) {
-            if (isBefore(bounds, elementBounds)) {
-                helperLines.push(new HelperLine(topRight(elementBounds), bottomLeft(bounds), HelperLineType.BottomTop));
+        if (
+            lineTypes.includes(HelperLineType.TopBottom) &&
+            this.isMatch(Bounds.top(elementBounds), Bounds.bottom(bounds), this.alignmentEpsilon)
+        ) {
+            if (Bounds.isBefore(bounds, elementBounds)) {
+                helperLines.push(new HelperLine(Bounds.topRight(elementBounds), Bounds.bottomLeft(bounds), HelperLineType.BottomTop));
                 this.log('- Reference bounds bottom aligns with element top', elementBounds);
             } else {
-                helperLines.push(new HelperLine(topLeft(elementBounds), bottomRight(bounds), HelperLineType.BottomTop));
+                helperLines.push(new HelperLine(Bounds.topLeft(elementBounds), Bounds.bottomRight(bounds), HelperLineType.BottomTop));
                 this.log('- Reference bounds bottom aligns with element top', elementBounds);
             }
         }
 
-        if (lineTypes.includes(HelperLineType.TopBottom) && this.isMatch(bottom(elementBounds), top(bounds), this.alignmentEpsilon)) {
-            if (isBefore(bounds, elementBounds)) {
-                helperLines.push(new HelperLine(bottomRight(elementBounds), topLeft(bounds), HelperLineType.TopBottom));
+        if (
+            lineTypes.includes(HelperLineType.TopBottom) &&
+            this.isMatch(Bounds.bottom(elementBounds), Bounds.top(bounds), this.alignmentEpsilon)
+        ) {
+            if (Bounds.isBefore(bounds, elementBounds)) {
+                helperLines.push(new HelperLine(Bounds.bottomRight(elementBounds), Bounds.topLeft(bounds), HelperLineType.TopBottom));
                 this.log('- Reference bounds top aligns with element bottom', elementBounds);
             } else {
-                helperLines.push(new HelperLine(bottomLeft(elementBounds), topRight(bounds), HelperLineType.TopBottom));
+                helperLines.push(new HelperLine(Bounds.bottomLeft(elementBounds), Bounds.topRight(bounds), HelperLineType.TopBottom));
                 this.log('- Reference bounds top aligns with element bottom', elementBounds);
             }
         }
@@ -300,7 +294,7 @@ export class DrawHelperLinesFeedbackCommand extends FeedbackCommand {
     }
 
     protected isMatch(leftCoordinate: number, rightCoordinate: number, epsilon: number): boolean {
-        return Math.abs(leftCoordinate - rightCoordinate) <= epsilon;
+        return equalUpTo(leftCoordinate, rightCoordinate, epsilon);
     }
 
     protected log(message: string, ...params: any[]): void {

package/src/features/helper-lines/helper-line-manager-default.ts

@@ -15,19 +15,23 @@
  ********************************************************************************/
 import {
     Action,
-    DisposableCollection,
     GModelElement,
     GModelRoot,
     IActionHandler,
     MoveAction,
     Point,
     SetBoundsAction,
-    TYPES
+    TYPES,
+    Vector,
+    Writable
 } from '@eclipse-glsp/sprotty';
 import { inject, injectable, optional, postConstruct } from 'inversify';
 import { IFeedbackActionDispatcher } from '../../base/feedback/feedback-action-dispatcher';
+import { FeedbackEmitter } from '../../base/feedback/feedback-emitter';
 import { ISelectionListener, SelectionService } from '../../base/selection-service';
 import { SetBoundsFeedbackAction } from '../bounds/set-bounds-feedback-command';
+import { GResizeHandle, ResizeHandleLocation } from '../change-bounds/model';
+import { Grid } from '../grid/grid';
 import { MoveFinishedEventAction, MoveInitializedEventAction } from '../tools/change-bounds/change-bounds-tool-feedback';
 import {
     AlignmentElementFilter,
@@ -41,7 +45,7 @@ import {
     ViewportLineType
 } from './helper-line-feedback';
 import { IHelperLineManager } from './helper-line-manager';
-import { Direction, HelperLineType } from './model';
+import { Direction, HelperLine, HelperLineType, isHelperLine } from './model';
 
 export interface IHelperLineOptions {
     /**
@@ -56,7 +60,7 @@ export interface IHelperLineOptions {
     viewportLines?: ViewportLineType[];
     /**
      * The minimum difference between two coordinates
-     * Defaults to 1.
+     * Defaults to 1 or zero (perfect match) if the optional grid module is loaded.
      */
     alignmentEpsilon?: number;
     /**
@@ -67,6 +71,7 @@ export interface IHelperLineOptions {
     /**
      * The minimum move delta that is necessary for an element to break through a helper line.
      * Defaults to { x: 1, y: 1 } whereas the x represents the horizontal distance and y represents the vertical distance.
+     * If the optional grid module is loaded, defaults to twice the grid size, i.e., two grid moves to break through a helper line.
      */
     minimumMoveDelta?: Point;
 
@@ -93,13 +98,20 @@ export class HelperLineManager implements IActionHandler, ISelectionListener, IH
     @inject(TYPES.IFeedbackActionDispatcher) protected feedbackDispatcher: IFeedbackActionDispatcher;
     @inject(SelectionService) protected selectionService: SelectionService;
     @optional() @inject(TYPES.IHelperLineOptions) protected userOptions?: IHelperLineOptions;
+    @optional() @inject(TYPES.Grid) protected grid?: Grid;
 
     protected options: Required<IHelperLineOptions>;
-    protected feedback: DisposableCollection = new DisposableCollection();
+    protected feedback: FeedbackEmitter;
 
     @postConstruct()
     protected init(): void {
-        this.options = { ...DEFAULT_HELPER_LINE_OPTIONS, ...this.userOptions };
+        this.feedback = this.feedbackDispatcher.createEmitter();
+        const dynamicOptions: IHelperLineOptions = {};
+        if (this.grid) {
+            dynamicOptions.alignmentEpsilon = 0;
+            dynamicOptions.minimumMoveDelta = Point.multiplyScalar(this.grid, 2);
+        }
+        this.options = { ...DEFAULT_HELPER_LINE_OPTIONS, ...dynamicOptions, ...this.userOptions };
         this.selectionService.onSelectionChanged(change =>
             this.selectionChanged(change.root, change.selectedElements, change.deselectedElements)
         );
@@ -118,9 +130,7 @@ export class HelperLineManager implements IActionHandler, ISelectionListener, IH
     }
 
     protected handleMoveInitializedAction(_action: MoveInitializedEventAction): void {
-        this.feedback.dispose();
-        const feedback = this.createHelperLineFeedback(this.selectionService.getSelectedElementIDs());
-        this.feedback.push(this.feedbackDispatcher.registerFeedback(this, [feedback], [RemoveHelperLinesFeedbackAction.create()]));
+        this.submitHelperLineFeedback();
     }
 
     protected handleMoveFinishedAction(_action: MoveFinishedEventAction): void {
@@ -129,22 +139,23 @@ export class HelperLineManager implements IActionHandler, ISelectionListener, IH
 
     protected handleMoveAction(action: MoveAction): void {
         if (!action.finished) {
-            const elementIds = action.moves.map(move => move.elementId);
-            const feedback = this.createHelperLineFeedback(elementIds);
-            this.feedback.push(this.feedbackDispatcher.registerFeedback(this, [feedback], [RemoveHelperLinesFeedbackAction.create()]));
+            this.submitHelperLineFeedback(action.moves.map(move => move.elementId));
         } else {
             this.feedback.dispose();
         }
     }
 
+    protected submitHelperLineFeedback(elementIds: string[] = this.selectionService.getSelectedElementIDs()): void {
+        const feedback = this.createHelperLineFeedback(elementIds);
+        this.feedback.add(feedback, [RemoveHelperLinesFeedbackAction.create()]).submit();
+    }
+
     protected createHelperLineFeedback(elementIds: string[]): DrawHelperLinesFeedbackAction {
         return DrawHelperLinesFeedbackAction.create({ elementIds, ...this.options });
     }
 
     protected handleSetBoundsAction(action: SetBoundsAction | SetBoundsFeedbackAction): void {
-        const elementIds = action.bounds.map(bound => bound.elementId);
-        const feedback = this.createHelperLineFeedback(elementIds);
-        this.feedback.push(this.feedbackDispatcher.registerFeedback(this, [feedback], [RemoveHelperLinesFeedbackAction.create()]));
+        this.submitHelperLineFeedback(action.bounds.map(bound => bound.elementId));
     }
 
     selectionChanged(root: Readonly<GModelRoot>, selectedElements: string[], deselectedElements?: string[] | undefined): void {
@@ -155,8 +166,87 @@ export class HelperLineManager implements IActionHandler, ISelectionListener, IH
         if (!isSnap) {
             return 0;
         }
-        return direction === Direction.Left || direction === Direction.Right
-            ? this.options.minimumMoveDelta.x
-            : this.options.minimumMoveDelta.y;
+        const minimumMoveDelta = this.options.minimumMoveDelta;
+        return direction === Direction.Left || direction === Direction.Right ? minimumMoveDelta.x : minimumMoveDelta.y;
     }
+
+    getMinimumMoveVector(element: GModelElement, isSnap: boolean, move: Direction[]): Vector | undefined {
+        if (!isSnap) {
+            return undefined;
+        }
+
+        const state = this.getHelperLineState(element);
+        if (state.helperLines.length === 0) {
+            return undefined;
+        }
+
+        const minimum: Writable<Vector> = { ...Vector.ZERO };
+        const resize =
+            element instanceof GResizeHandle
+                ? ResizeHandleLocation.direction(element.location)
+                : [Direction.Left, Direction.Right, Direction.Up, Direction.Down];
+
+        if ((state.types.left || state.types.center) && move.includes(Direction.Left) && resize.includes(Direction.Left)) {
+            minimum.x = this.getMinimumMoveDelta(element, isSnap, Direction.Left);
+        } else if ((state.types.right || state.types.center) && move.includes(Direction.Right) && resize.includes(Direction.Right)) {
+            minimum.x = this.getMinimumMoveDelta(element, isSnap, Direction.Right);
+        }
+        if ((state.types.top || state.types.middle) && move.includes(Direction.Up) && resize.includes(Direction.Up)) {
+            minimum.y = this.getMinimumMoveDelta(element, isSnap, Direction.Up);
+        } else if ((state.types.bottom || state.types.middle) && move.includes(Direction.Down) && resize.includes(Direction.Down)) {
+            minimum.y = this.getMinimumMoveDelta(element, isSnap, Direction.Down);
+        }
+        return Vector.isZero(minimum) ? undefined : minimum;
+    }
+
+    protected getHelperLineState(element: GModelElement): HelperLineState {
+        const helperLines = element.root.children.filter(isHelperLine) || [];
+        const types = {
+            left: false,
+            right: false,
+            top: false,
+            bottom: false,
+            center: false,
+            middle: false
+        };
+        for (const line of helperLines) {
+            switch (line.lineType) {
+                case HelperLineType.Left:
+                case HelperLineType.LeftRight:
+                    types.left = true;
+                    break;
+                case HelperLineType.Right:
+                case HelperLineType.RightLeft:
+                    types.right = true;
+                    break;
+                case HelperLineType.Top:
+                case HelperLineType.TopBottom:
+                    types.top = true;
+                    break;
+                case HelperLineType.Bottom:
+                case HelperLineType.BottomTop:
+                    types.bottom = true;
+                    break;
+                case HelperLineType.Center:
+                    types.center = true;
+                    break;
+                case HelperLineType.Middle:
+                    types.middle = true;
+                    break;
+            }
+        }
+        return { helperLines, types };
+    }
+}
+
+export interface HelperLineState {
+    helperLines: HelperLine[];
+    types: {
+        left: boolean;
+        right: boolean;
+        top: boolean;
+        bottom: boolean;
+        center: boolean;
+        middle: boolean;
+    };
 }

package/src/features/helper-lines/helper-line-manager.ts

@@ -13,16 +13,25 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-import { GModelElement } from '@eclipse-glsp/sprotty';
+import { GModelElement, Vector } from '@eclipse-glsp/sprotty';
 import { Direction } from './model';
 
 export interface IHelperLineManager {
     /**
-     * Calculates the minimum move delta that is necessary to break through a helper line.
+     * Calculates the minimum move delta on one axis that is necessary to break through a helper line.
      *
      * @param element element that is being moved
      * @param isSnap whether snapping is active or not
      * @param direction direction in which the target element is moving
      */
     getMinimumMoveDelta(element: GModelElement, isSnap: boolean, direction: Direction): number;
+
+    /**
+     * Calculates the minimum move vector that is necessary to break through a helper line.
+     *
+     * @param element element that is being moved
+     * @param isSnap whether snapping is active or not
+     * @param directions directions in which the target element is moving
+     */
+    getMinimumMoveVector(element: GModelElement, isSnap: boolean, directions: Direction[]): Vector | undefined;
 }

package/src/features/helper-lines/helper-line-module.ts

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2023 EclipseSource and others.
+ * Copyright (c) 2023-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
@@ -31,17 +31,20 @@ import { HelperLineManager } from './helper-line-manager-default';
 import { HELPER_LINE, HelperLine, SELECTION_BOUNDS, SelectionBounds } from './model';
 import { HelperLineView, SelectionBoundsView } from './view';
 
-export const helperLineModule = new FeatureModule((bind, unbind, isBound, rebind) => {
-    const context = { bind, unbind, isBound, rebind };
-    configureModelElement(context, HELPER_LINE, HelperLine, HelperLineView);
-    configureModelElement(context, SELECTION_BOUNDS, SelectionBounds, SelectionBoundsView);
-    configureCommand(context, DrawHelperLinesFeedbackCommand);
-    configureCommand(context, RemoveHelperLinesFeedbackCommand);
+export const helperLineModule = new FeatureModule(
+    (bind, unbind, isBound, rebind) => {
+        const context = { bind, unbind, isBound, rebind };
+        configureModelElement(context, HELPER_LINE, HelperLine, HelperLineView);
+        configureModelElement(context, SELECTION_BOUNDS, SelectionBounds, SelectionBoundsView);
+        configureCommand(context, DrawHelperLinesFeedbackCommand);
+        configureCommand(context, RemoveHelperLinesFeedbackCommand);
 
-    bindAsService(bind, TYPES.IHelperLineManager, HelperLineManager);
-    configureActionHandler(context, SetBoundsAction.KIND, TYPES.IHelperLineManager);
-    configureActionHandler(context, SetBoundsFeedbackAction.KIND, TYPES.IHelperLineManager);
-    configureActionHandler(context, MoveAction.KIND, TYPES.IHelperLineManager);
-    configureActionHandler(context, MoveInitializedEventAction.KIND, TYPES.IHelperLineManager);
-    configureActionHandler(context, MoveFinishedEventAction.KIND, TYPES.IHelperLineManager);
-});
+        bindAsService(bind, TYPES.IHelperLineManager, HelperLineManager);
+        configureActionHandler(context, SetBoundsAction.KIND, TYPES.IHelperLineManager);
+        configureActionHandler(context, SetBoundsFeedbackAction.KIND, TYPES.IHelperLineManager);
+        configureActionHandler(context, MoveAction.KIND, TYPES.IHelperLineManager);
+        configureActionHandler(context, MoveInitializedEventAction.KIND, TYPES.IHelperLineManager);
+        configureActionHandler(context, MoveFinishedEventAction.KIND, TYPES.IHelperLineManager);
+    },
+    { featureId: Symbol('helperLine') }
+);

package/src/features/helper-lines/model.ts

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2023 EclipseSource and others.
+ * Copyright (c) 2023-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,7 +14,7 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 
-import { Args, Bounds, GChildElement, GModelElement, GShapeElement, Point } from '@eclipse-glsp/sprotty';
+import { Args, Bounds, Direction, GChildElement, GModelElement, GShapeElement, Point, Vector } from '@eclipse-glsp/sprotty';
 import { v4 as uuid } from 'uuid';
 import { ArgsAware } from '../../base/args-feature';
 import { ResizeHandleLocation } from '../change-bounds/model';
@@ -98,30 +98,8 @@ export function isSelectionBounds(element: GModelElement): element is SelectionB
     return element.type === SELECTION_BOUNDS;
 }
 
-export const Direction = {
-    Left: 'left',
-    Right: 'right',
-    Up: 'up',
-    Down: 'down'
-} as const;
-
-// allow any string to be set as helper line type to support customization
-export type Direction = (typeof Direction)[keyof typeof Direction];
-
-export function getDirectionOf(point: Point): Direction[] {
-    const directions: Direction[] = [];
-    if (point.x < 0) {
-        directions.push(Direction.Left);
-    } else if (point.x > 0) {
-        directions.push(Direction.Right);
-    }
-    if (point.y < 0) {
-        directions.push(Direction.Up);
-    } else if (point.y > 0) {
-        directions.push(Direction.Down);
-    }
-    return directions;
-}
+// kept for backwards compatibility after moving the definition
+export const getDirectionOf = Vector.direction;
 
 export function getDirectionFrom(resize?: ResizeHandleLocation): Direction[] {
     if (resize === ResizeHandleLocation.TopLeft) {
@@ -138,3 +116,6 @@ export function getDirectionFrom(resize?: ResizeHandleLocation): Direction[] {
     }
     return [];
 }
+
+// re-export for backwards compatibility after moving the definition
+export { Direction } from '@eclipse-glsp/sprotty';

package/src/features/helper-lines/view.tsx

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2023 EclipseSource and others.
+ * Copyright (c) 2023-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
@@ -13,14 +13,12 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
+/** @jsx svg */
 import { IViewArgs, RenderingContext, ShapeView, svg } from '@eclipse-glsp/sprotty';
 import { injectable } from 'inversify';
 import { VNode } from 'snabbdom';
 import { HelperLine, SelectionBounds } from './model';
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const JSX = { createElement: svg };
-
 @injectable()
 export class HelperLineView extends ShapeView {
     override render(model: HelperLine, _context: RenderingContext): VNode | undefined {

package/src/features/hints/model.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
@@ -24,7 +24,12 @@ export interface Containable {
     isContainableElement(input: GModelElement | GModelElementSchema | string): boolean;
 }
 
-export function isContainable(element: GModelElement): element is GModelElement & Containable {
+/**
+ * A union type for all elements that can contain other elements.
+ */
+export type ContainerElement = GModelElement & Containable;
+
+export function isContainable(element: GModelElement): element is ContainerElement {
     return element.hasFeature(containerFeature);
 }
 

package/src/features/hints/type-hint-provider.spec.ts

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2023 EclipseSource and others.
+ * Copyright (c) 2023-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
@@ -36,16 +36,19 @@ import { expect } from 'chai';
 import { Container } from 'inversify';
 import * as sinon from 'sinon';
 import { GLSPActionDispatcher } from '../../base/action-dispatcher';
-import { FeedbackActionDispatcher } from '../../base/feedback/feedback-action-dispatcher';
+import { FeedbackActionDispatcher } from '../../base/feedback/feedback-action-dispatcher-default';
 import { GEdge } from '../../model';
 import { isResizable } from '../change-bounds/model';
 import { isReconnectable } from '../reconnect/model';
 import { Containable, isContainable, isReparentable } from './model';
 import { ApplyTypeHintsAction, ApplyTypeHintsCommand, ITypeHintProvider, TypeHintProvider } from './type-hint-provider';
+import { FeedbackEmitter } from '../../base/feedback/feedback-emitter';
 describe('TypeHintProvider', () => {
     const container = new Container();
     container.bind(GLSPActionDispatcher).toConstantValue(sinon.createStubInstance(GLSPActionDispatcher));
-    container.bind(TYPES.IFeedbackActionDispatcher).toConstantValue(sinon.createStubInstance(FeedbackActionDispatcher));
+    const stub = sinon.createStubInstance(FeedbackActionDispatcher);
+    stub.createEmitter.returns(new FeedbackEmitter(stub));
+    container.bind(TYPES.IFeedbackActionDispatcher).toConstantValue(stub);
     const typeHintProvider = container.resolve(TypeHintProvider);
 
     describe('getShapeTypeHint', () => {

package/src/features/hints/type-hint-provider.ts

@@ -35,11 +35,12 @@ import {
     isConnectable,
     moveFeature
 } from '@eclipse-glsp/sprotty';
-import { inject, injectable } from 'inversify';
+import { inject, injectable, postConstruct } from 'inversify';
 
 import { GLSPActionDispatcher } from '../../base/action-dispatcher';
 import { IFeedbackActionDispatcher } from '../../base/feedback/feedback-action-dispatcher';
 import { FeedbackCommand } from '../../base/feedback/feedback-command';
+import { FeedbackEmitter } from '../../base/feedback/feedback-emitter';
 import { IDiagramStartup } from '../../base/model/diagram-loader';
 import { GEdge } from '../../model';
 import { getElementTypeId } from '../../utils/gmodel-util';
@@ -204,15 +205,21 @@ export class TypeHintProvider implements IActionHandler, ITypeHintProvider, IDia
     @inject(GLSPActionDispatcher)
     protected actionDispatcher: GLSPActionDispatcher;
 
+    protected typeHintsFeedback: FeedbackEmitter;
     protected shapeHints: Map<string, ShapeTypeHint> = new Map();
     protected edgeHints: Map<string, EdgeTypeHint> = new Map();
 
+    @postConstruct()
+    protected init(): void {
+        this.typeHintsFeedback = this.feedbackActionDispatcher.createEmitter();
+    }
+
     handle(action: SetTypeHintsAction): void {
         this.shapeHints.clear();
         this.edgeHints.clear();
         action.shapeHints.forEach(hint => this.shapeHints.set(hint.elementTypeId, hint));
         action.edgeHints.forEach(hint => this.edgeHints.set(hint.elementTypeId, hint));
-        this.feedbackActionDispatcher.registerFeedback(this, [ApplyTypeHintsAction.create()]);
+        this.typeHintsFeedback.add(ApplyTypeHintsAction.create()).submit();
     }
 
     getShapeTypeHint(input: GModelElement | GModelElementSchema | string): ShapeTypeHint | undefined {