@eclipse-glsp/client 0.10.0-next.e5fcffe.169 → 1.1.0-next.282a632.186

package/src/base/model/update-model-command.ts

@@ -13,25 +13,31 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-import { Action, SetModelAction, UpdateModelAction } from '@eclipse-glsp/protocol';
-import { inject, injectable, multiInject, optional, postConstruct } from 'inversify';
+import { Action, SetModelAction, toTypeGuard, UpdateModelAction } from '@eclipse-glsp/protocol';
+import { inject, injectable, multiInject, optional } from 'inversify';
 import {
     ActionHandlerRegistry,
+    Animation,
     Command,
     CommandActionHandler,
     CommandExecutionContext,
     CommandReturn,
     IActionHandler,
     ILogger,
+    MorphEdgesAnimation,
     SModelRoot,
+    UpdateAnimationData,
     UpdateModelCommand
 } from 'sprotty';
 import { IFeedbackActionDispatcher } from '../../features/tool-feedback/feedback-action-dispatcher';
 import { FeedbackCommand } from '../../features/tool-feedback/model';
 import { TYPES } from '../types';
 
-/* ActionHandler that transforms a SetModelAction into an (feedback-aware) UpdateModelAction. This can be done because in sprotty
- *  UpdateModel behaves the same as SetModel if no model is present yet.*/
+/**
+ * ActionHandler that transforms a {@link SetModelAction} into an {@link UpdateModelAction} that can be handled
+ * by the {@link FeedbackAwareUpdateModelCommand}. This can be done because in sprotty an {@link UpdateModelCommand} and
+ * a {@link SetModelCommand} have the same behavior of no model is present yet.
+ */
 @injectable()
 export class SetModelActionHandler implements IActionHandler {
     handle(action: Action): Action | void {
@@ -46,38 +52,41 @@ export interface SModelRootListener {
 }
 
 /**
- * A special`UpdateModelCommand` that retrieves all registered `actions` from the `IFeedbackActionDispatcher` (if present) and applies their
- * feedback to the `newRoot` before performing the update
+ * A special {@link UpdateModelCommand} that retrieves all registered {@link Action}s from the {@link IFeedbackActionDispatcher}
+ * (if present) and applies their feedback to the `newRoot` before performing the update. This enables persistent client-side feedback
+ * across model updates initiated by the GLSP server.
  */
 @injectable()
 export class FeedbackAwareUpdateModelCommand extends UpdateModelCommand {
-    @inject(TYPES.ILogger) protected logger: ILogger;
-    @inject(TYPES.IFeedbackActionDispatcher) @optional() protected readonly feedbackActionDispatcher: IFeedbackActionDispatcher;
-    @inject(TYPES.ActionHandlerRegistryProvider) protected actionHandlerRegistryProvider: () => Promise<ActionHandlerRegistry>;
-    @multiInject(TYPES.SModelRootListener) @optional() protected modelRootListeners: SModelRootListener[] = [];
+    @inject(TYPES.ILogger)
+    protected logger: ILogger;
+
+    @inject(TYPES.IFeedbackActionDispatcher)
+    @optional()
+    protected feedbackActionDispatcher: IFeedbackActionDispatcher;
+
+    @multiInject(TYPES.SModelRootListener)
+    @optional()
+    protected modelRootListeners: SModelRootListener[] = [];
 
     protected actionHandlerRegistry?: ActionHandlerRegistry;
 
-    constructor(@inject(TYPES.Action) action: UpdateModelAction) {
+    constructor(
+        @inject(TYPES.Action) action: UpdateModelAction,
+        @inject(TYPES.ActionHandlerRegistryProvider)
+        actionHandlerRegistryProvider: () => Promise<ActionHandlerRegistry>
+    ) {
         super({ animate: true, ...action });
-    }
-
-    @postConstruct()
-    protected initialize(): void {
-        this.actionHandlerRegistryProvider().then(registry => (this.actionHandlerRegistry = registry));
+        actionHandlerRegistryProvider().then(registry => (this.actionHandlerRegistry = registry));
     }
 
     protected override performUpdate(oldRoot: SModelRoot, newRoot: SModelRoot, context: CommandExecutionContext): CommandReturn {
         if (this.feedbackActionDispatcher && this.actionHandlerRegistry) {
-            // Create a temporary context wich defines the `newRoot` as `root`
+            // Create a temporary context which defines the `newRoot` as `root`
             // This way we do not corrupt the redo/undo behavior of the super class
             const tempContext: CommandExecutionContext = {
-                root: newRoot,
-                duration: context.duration,
-                logger: context.logger,
-                modelChanged: context.modelChanged,
-                modelFactory: context.modelFactory,
-                syncer: context.syncer
+                ...context,
+                root: newRoot
             };
 
             const feedbackCommands = this.getFeedbackCommands(this.actionHandlerRegistry);
@@ -91,19 +100,24 @@ export class FeedbackAwareUpdateModelCommand extends UpdateModelCommand {
     protected getFeedbackCommands(registry: ActionHandlerRegistry): Command[] {
         const result: Command[] = [];
         this.feedbackActionDispatcher.getRegisteredFeedback().forEach(action => {
-            const handler = registry.get(action.kind).find(h => h instanceof CommandActionHandler);
-            if (handler instanceof CommandActionHandler) {
-                result.push(handler.handle(action));
-            }
+            const commands = registry
+                .get(action.kind)
+                .filter<CommandActionHandler>(toTypeGuard(CommandActionHandler))
+                .map(handler => handler.handle(action));
+            result.push(...commands);
         });
-        // sort commands descanding by priority
-        return result.sort((a, b) => getPriority(b) - getPriority(a));
+        // sort commands descanting by priority
+        return result.sort((a, b) => this.getPriority(b) - this.getPriority(a));
+    }
+
+    protected getPriority(command: Partial<FeedbackCommand>): number {
+        return command.priority ?? 0;
     }
-}
 
-function getPriority(command: Command): number {
-    if (command instanceof FeedbackCommand) {
-        return command.priority;
+    // Override the `createAnimations` implementation and remove the animation for edge morphing. Otherwise routing & reconnect
+    // handles flicker after each server update.
+    protected override createAnimations(data: UpdateAnimationData, root: SModelRoot, context: CommandExecutionContext): Animation[] {
+        const animations = super.createAnimations(data, root, context);
+        return animations.filter(animation => !(animation instanceof MorphEdgesAnimation));
     }
-    return 0;
 }

package/src/base/source-uri-aware.ts

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2020 EclipseSource and others.
+ * Copyright (c) 2020-2022 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,10 +13,11 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-export abstract class SourceUriAware {
-    abstract getSourceURI(): string;
+import { AnyObject, hasStringProp } from '@eclipse-glsp/protocol';
+export interface SourceUriAware {
+    sourceURI: string;
 }
 
 export function isSourceUriAware(obj: any): obj is SourceUriAware {
-    return obj !== undefined && typeof obj.getSourceURI === 'function';
+    return AnyObject.is(obj) && hasStringProp(obj, 'sourceURI');
 }

package/src/features/change-bounds/movement-restrictor.ts

@@ -20,40 +20,35 @@ import { toAbsoluteBounds } from '../../utils/viewpoint-util';
 import { ModifyCSSFeedbackAction } from '../tool-feedback/css-feedback';
 import { isBoundsAwareMoveable, SResizeHandle } from './model';
 
+/**
+ * A `MovementRestrictor` is an optional service that can be used by tools to validate
+ * whether a certain move operation (e.g. `ChangeBoundsOperation`) in the diagram is valid.
+ */
 export interface IMovementRestrictor {
-    validate(newLocation: Point, element: SModelElement): boolean;
+    /**
+     * Validate whether moving the given element to a new given location is allowed.
+     * @param element The element that should be moved.
+     * @param newLocation The new location of the element.
+     * @returns `true` if the the element is movable and moving to the given location is allowed, `false` otherwise.
+     *          Should also return `false` if the newLocation is `undefined`:
+     */
+    validate(element: SModelElement, newLocation?: Point): boolean;
+    /**
+     * Feedback css-classes. Can be applied to elements that did fail the validation.
+     */
     cssClasses?: string[];
 }
 
-export function createMovementRestrictionFeedback(
-    element: SModelElement,
-    movementRestrictor: IMovementRestrictor
-): ModifyCSSFeedbackAction {
-    const elements: SModelElement[] = [element];
-    if (element instanceof SParentElement) {
-        element.children.filter(child => child instanceof SResizeHandle).forEach(e => elements.push(e));
-    }
-    return ModifyCSSFeedbackAction.create({ elements, add: movementRestrictor.cssClasses });
-}
-
-export function removeMovementRestrictionFeedback(
-    element: SModelElement,
-    movementRestrictor: IMovementRestrictor
-): ModifyCSSFeedbackAction {
-    const elements: SModelElement[] = [element];
-    if (element instanceof SParentElement) {
-        element.children.filter(child => child instanceof SResizeHandle).forEach(e => elements.push(e));
-    }
-
-    return ModifyCSSFeedbackAction.create({ elements, remove: movementRestrictor.cssClasses });
-}
-
+/**
+ *  A `IMovementRestrictor` that checks for overlapping elements. Move operations
+ *  are only valid if the element does not collide with another element after moving.
+ */
 @injectable()
-export class NoOverlapMovmentRestrictor implements IMovementRestrictor {
+export class NoOverlapMovementRestrictor implements IMovementRestrictor {
     cssClasses = ['movement-not-allowed'];
 
-    validate(newLocation: Point, element: SModelElement): boolean {
-        if (!isBoundsAwareMoveable(element)) {
+    validate(element: SModelElement, newLocation?: Point): boolean {
+        if (!isBoundsAwareMoveable(element) || !newLocation) {
             return false;
         }
         // Create ghost element at the newLocation
@@ -71,27 +66,62 @@ export class NoOverlapMovmentRestrictor implements IMovementRestrictor {
                 .all()
                 .filter(e => e.id !== ghostElement.id && e !== ghostElement.root && e instanceof SNode)
                 .map(e => e as SModelElement & BoundsAware)
-        ).some(e => areOverlapping(e, ghostElement));
+        ).some(e => this.areOverlapping(e, ghostElement));
     }
-}
 
-export function areOverlapping(element1: SModelElement & BoundsAware, element2: SModelElement & BoundsAware): boolean {
-    const b1 = toAbsoluteBounds(element1);
-    const b2 = toAbsoluteBounds(element2);
-    const r1TopLeft: Point = b1;
-    const r1BottomRight = { x: b1.x + b1.width, y: b1.y + b1.height };
-    const r2TopLeft: Point = b2;
-    const r2BottomRight = { x: b2.x + b2.width, y: b2.y + b2.height };
+    protected areOverlapping(element1: SModelElement & BoundsAware, element2: SModelElement & BoundsAware): boolean {
+        const b1 = toAbsoluteBounds(element1);
+        const b2 = toAbsoluteBounds(element2);
+        const r1TopLeft: Point = b1;
+        const r1BottomRight = { x: b1.x + b1.width, y: b1.y + b1.height };
+        const r2TopLeft: Point = b2;
+        const r2BottomRight = { x: b2.x + b2.width, y: b2.y + b2.height };
+
+        // If one rectangle is on left side of other
+        if (r1TopLeft.x > r2BottomRight.x || r2TopLeft.x > r1BottomRight.x) {
+            return false;
+        }
 
-    // If one rectangle is on left side of other
-    if (r1TopLeft.x > r2BottomRight.x || r2TopLeft.x > r1BottomRight.x) {
-        return false;
+        // If one rectangle is above other
+        if (r1BottomRight.y < r2TopLeft.y || r2BottomRight.y < r1TopLeft.y) {
+            return false;
+        }
+
+        return true;
     }
+}
 
-    // If one rectangle is above other
-    if (r1BottomRight.y < r2TopLeft.y || r2BottomRight.y < r1TopLeft.y) {
-        return false;
+/**
+ * Utility function to create an action that applies the given {@link IMovementRestrictor.cssClasses} to the given element.
+ * @param element The element on which the css classes should be applied.
+ * @param movementRestrictor The movement restrictor whose cssClasses should be applied.
+ * @returns The corresponding {@link ModifyCSSFeedbackAction}
+ */
+export function createMovementRestrictionFeedback(
+    element: SModelElement,
+    movementRestrictor: IMovementRestrictor
+): ModifyCSSFeedbackAction {
+    const elements: SModelElement[] = [element];
+    if (element instanceof SParentElement) {
+        element.children.filter(child => child instanceof SResizeHandle).forEach(e => elements.push(e));
+    }
+    return ModifyCSSFeedbackAction.create({ elements, add: movementRestrictor.cssClasses });
+}
+
+/**
+ * Utility function to create an action that removes the given {@link IMovementRestrictor.cssClasses} from the given element.
+ * @param element The element from which the css classes should be removed.
+ * @param movementRestrictor The movement restrictor whose cssClasses should be removed.
+ * @returns The corresponding {@link ModifyCSSFeedbackAction}
+ */
+export function removeMovementRestrictionFeedback(
+    element: SModelElement,
+    movementRestrictor: IMovementRestrictor
+): ModifyCSSFeedbackAction {
+    const elements: SModelElement[] = [element];
+    if (element instanceof SParentElement) {
+        element.children.filter(child => child instanceof SResizeHandle).forEach(e => elements.push(e));
     }
 
-    return true;
+    return ModifyCSSFeedbackAction.create({ elements, remove: movementRestrictor.cssClasses });
 }

package/src/features/change-bounds/snap.ts

@@ -13,25 +13,28 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-import { Point } from '@eclipse-glsp/protocol';
+import { Point, Writable } from '@eclipse-glsp/protocol';
 import { injectable } from 'inversify';
 import { findParentByFeature, ISnapper, isViewport, SModelElement } from 'sprotty';
-import { WriteablePoint } from '../../utils/layout-utils';
 
+/**
+ * A {@link ISnapper} implementation that snaps all elements onto a fixed gride size.
+ * The default grid size is 10x10 pixel.
+ * To configure a custom grid size  bind the `TYPES.ISnapper` service identifier
+ * to constant value, e.g:
+ *
+ * ```ts
+ * bind(TYPES.ISnapper).toConstantValue(new GridSnapper({x:25 ,y:25 }));
+ * ```
+ */
 @injectable()
 export class GridSnapper implements ISnapper {
-    get gridX(): number {
-        return 10;
-    }
-
-    get gridY(): number {
-        return 10;
-    }
+    constructor(public grid: { x: number; y: number } = { x: 10, y: 10 }) {}
 
     snap(position: Point, element: SModelElement): Point {
         return {
-            x: Math.round(position.x / this.gridX) * this.gridX,
-            y: Math.round(position.y / this.gridY) * this.gridY
+            x: Math.round(position.x / this.grid.x) * this.grid.x,
+            y: Math.round(position.y / this.grid.y) * this.grid.y
         };
     }
 }
@@ -46,7 +49,7 @@ export class GridSnapper implements ISnapper {
  */
 export class PointPositionUpdater {
     protected lastDragPosition?: Point;
-    protected positionDelta: WriteablePoint = { x: 0, y: 0 };
+    protected positionDelta: Writable<Point> = { x: 0, y: 0 };
 
     constructor(protected snapper?: ISnapper) {}
 

package/src/features/context-menu/selection-service-aware-context-menu-mouse-listener.ts

@@ -15,53 +15,47 @@
  ********************************************************************************/
 import { Action } from '@eclipse-glsp/protocol';
 import { inject, injectable, optional } from 'inversify';
-import {
-    ContextMenuProviderRegistry,
-    findParentByFeature,
-    IContextMenuServiceProvider,
-    isSelectable,
-    MouseListener,
-    SModelElement
-} from 'sprotty';
+import { ContextMenuProviderRegistry, IContextMenuServiceProvider, MouseListener, SModelElement } from 'sprotty';
 import { FocusStateChangedAction } from '../../base/actions/focus-change-action';
 import { TYPES } from '../../base/types';
 import { SelectionService } from '../select/selection-service';
 
 @injectable()
 export class SelectionServiceAwareContextMenuMouseListener extends MouseListener {
-    @inject(TYPES.IContextMenuServiceProvider) @optional() protected readonly contextMenuService: IContextMenuServiceProvider;
-    @inject(TYPES.IContextMenuProviderRegistry) @optional() protected readonly menuProvider: ContextMenuProviderRegistry;
-    @inject(TYPES.SelectionService) protected selectionService: SelectionService;
+    @inject(TYPES.IContextMenuServiceProvider)
+    @optional()
+    protected readonly contextMenuService?: IContextMenuServiceProvider;
+
+    @inject(TYPES.IContextMenuProviderRegistry)
+    @optional()
+    protected readonly menuProvider?: ContextMenuProviderRegistry;
+
+    @inject(TYPES.SelectionService)
+    protected selectionService: SelectionService;
 
     /**
-     * Opens the context menu on right-click.
+     * Opens the context menu.
      */
-    override mouseDown(target: SModelElement, event: MouseEvent): (Action | Promise<Action>)[] {
-        if (event.button === 2 && this.contextMenuService && this.menuProvider) {
-            return this.openContextMenu(event, target);
-        }
-        return [];
+    override contextMenu(target: SModelElement, event: MouseEvent): (Action | Promise<Action>)[] {
+        return this.openContextMenu(target, event);
     }
 
     /**
      * Opens the context menu.
      *
-     *   - query the element on the click-target
-     *   - select the element
      *   - query the context menu service and the context menu elements
      *   - show the context menu
      *   - send a focus state change to indicate that the diagram becomes inactive, once the context menu is shown
      *
      * When the context menu is closed, we focus the diagram element again.
      */
-    protected openContextMenu(event: MouseEvent, target: SModelElement): Promise<Action>[] {
-        const mousePosition = { x: event.x, y: event.y };
-        const selectableTarget = findParentByFeature(target, isSelectable);
-        if (selectableTarget) {
-            selectableTarget.selected = true;
-            this.selectionService.updateSelection(target.root, [selectableTarget.id], []);
+    protected openContextMenu(target: SModelElement, event: MouseEvent): Promise<Action>[] {
+        if (!this.contextMenuService || !this.menuProvider) {
+            return [];
         }
 
+        const mousePosition = { x: event.x, y: event.y };
+
         const result = Promise.all([this.contextMenuService(), this.menuProvider.getItems(target.root, mousePosition)])
             .then(([menuService, menuItems]) => menuService.show(menuItems, mousePosition, () => this.focusEventTarget(event)))
             .then((): Action => FocusStateChangedAction.create(false));

package/src/features/hover/hover.ts

@@ -23,20 +23,11 @@ import {
     SModelRootSchema
 } from '@eclipse-glsp/protocol';
 import { injectable } from 'inversify';
-import {
-    EMPTY_ROOT,
-    HoverFeedbackAction,
-    HoverMouseListener,
-    IActionHandler,
-    ICommand,
-    SIssueMarker,
-    SIssueSeverity,
-    SModelElement
-} from 'sprotty';
+import { EMPTY_ROOT, HoverFeedbackAction, HoverMouseListener, IActionHandler, ICommand, SModelElement } from 'sprotty';
 import { FocusStateChangedAction } from '../../base/actions/focus-change-action';
 import { EnableDefaultToolsAction, EnableToolsAction } from '../../base/tool-manager/tool-actions';
 import { EdgeCreationTool } from '../tools/edge-creation-tool';
-import { GIssueMarker } from '../validation/issue-marker';
+import { getSeverity, GIssueMarker } from '../validation/issue-marker';
 @injectable()
 export class GlspHoverMouseListener extends HoverMouseListener implements IActionHandler {
     protected enableHover = true;
@@ -117,16 +108,3 @@ export class GlspHoverMouseListener extends HoverMouseListener implements IActio
         return bounds;
     }
 }
-
-export function getSeverity(marker: SIssueMarker): SIssueSeverity {
-    let currentSeverity: SIssueSeverity = 'info';
-    for (const severity of marker.issues.map(s => s.severity)) {
-        if (severity === 'error') {
-            return severity;
-        }
-        if (severity === 'warning' && currentSeverity === 'info') {
-            currentSeverity = severity;
-        }
-    }
-    return currentSeverity;
-}

package/src/features/layout/di.config.ts

@@ -14,19 +14,27 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 import { ContainerModule } from 'inversify';
-import { configureCommand, configureLayout, HBoxLayouter, VBoxLayouter } from 'sprotty';
+import { configureActionHandler, configureLayout, HBoxLayouter, TYPES, VBoxLayouter } from 'sprotty';
 import { FreeFormLayouter } from './freeform-layout';
 import { HBoxLayouterExt } from './hbox-layout';
-import { AlignElementsCommand, ResizeElementsCommand } from './layout-commands';
+import {
+    AlignElementsAction,
+    AlignElementsActionHandler,
+    ResizeElementsAction,
+    ResizeElementsActionHandler
+} from './layout-elements-action';
+import { LayouterExt } from './layouter';
 import { VBoxLayouterExt } from './vbox-layout';
 
-const layoutCommandsModule = new ContainerModule((bind, _unbind, isBound, rebind) => {
-    configureCommand({ bind, isBound }, ResizeElementsCommand);
-    configureCommand({ bind, isBound }, AlignElementsCommand);
+const layoutModule = new ContainerModule((bind, _unbind, isBound, rebind) => {
+    const context = { bind, isBound };
+    configureActionHandler(context, ResizeElementsAction.KIND, ResizeElementsActionHandler);
+    configureActionHandler(context, AlignElementsAction.KIND, AlignElementsActionHandler);
 
     rebind(VBoxLayouter).to(VBoxLayouterExt);
     rebind(HBoxLayouter).to(HBoxLayouterExt);
+    rebind(TYPES.Layouter).to(LayouterExt);
     configureLayout({ bind, isBound }, FreeFormLayouter.KIND, FreeFormLayouter);
 });
 
-export default layoutCommandsModule;
+export default layoutModule;

package/src/features/layout/hbox-layout.ts

@@ -49,6 +49,9 @@ export class HBoxLayouterExt extends HBoxLayouter {
 
         const fixedSize = this.getFixedContainerBounds(container, options, layouter);
 
+        const currentWidth = boundsData.bounds ? boundsData.bounds?.width - options.paddingLeft - options.paddingRight : 0;
+        const currentHeight = boundsData.bounds ? boundsData.bounds?.height - options.paddingTop - options.paddingBottom : 0;
+
         const maxWidth =
             options.paddingFactor *
             (options.resizeContainer
@@ -60,8 +63,11 @@ export class HBoxLayouterExt extends HBoxLayouter {
                 ? Math.max(fixedSize.height - options.paddingTop - options.paddingBottom, childrenSize.height)
                 : Math.max(0, fixedSize.height - options.paddingTop - options.paddingBottom));
 
+        const width = Math.max(currentWidth, maxWidth);
+        const height = Math.max(currentHeight, maxHeight);
+
         // Remaining size that can be grabbed by children with the hGrab option
-        const grabWidth: number = maxWidth - childrenSize.width;
+        const grabWidth = width - childrenSize.width;
         // Number of children that request hGrab
         // FIXME: This approach works fine when only 1 child uses HGrab, but may cause rounding issues
         // when the grabHeight can't be equally shared by all children.
@@ -69,8 +75,8 @@ export class HBoxLayouterExt extends HBoxLayouter {
             .map(child => this.getChildLayoutOptions(child, options))
             .filter(opt => opt.hGrab).length;
 
-        if (maxWidth > 0 && maxHeight > 0) {
-            const offset = this.layoutChildren(container, layouter, options, maxWidth, maxHeight, grabWidth, grabbingChildren);
+        if (width > 0 && height > 0) {
+            const offset = this.layoutChildren(container, layouter, options, width, height, grabWidth, grabbingChildren);
             boundsData.bounds = this.getFinalContainerBounds(container, offset, options, childrenSize.width, childrenSize.height);
             boundsData.boundsChanged = true;
         }
@@ -155,8 +161,15 @@ export class HBoxLayouterExt extends HBoxLayouter {
         grabWidth?: number,
         grabbingChildren?: number
     ): Point {
+        const vAlign = childOptions.vGrab ? 'top' : childOptions.vAlign;
+        const dy = this.getDy(vAlign, bounds, maxHeight);
         let offset = super.layoutChild(child, boundsData, bounds, childOptions, containerOptions, currentOffset, maxWidth, maxHeight);
-        if (childOptions.hGrab) {
+        boundsData.bounds = {
+            ...boundsData.bounds!,
+            x: currentOffset.x,
+            y: currentOffset.y + dy
+        };
+        if (childOptions.vGrab) {
             boundsData.bounds = {
                 x: boundsData.bounds!.x,
                 y: boundsData.bounds!.y,
@@ -197,7 +210,7 @@ export class HBoxLayouterExt extends HBoxLayouter {
     }
 
     protected override getChildLayoutOptions(child: SChildElement, containerOptions: HBoxLayoutOptionsExt): HBoxLayoutOptionsExt {
-        return super.getChildLayoutOptions(child, containerOptions) as HBoxLayoutOptionsExt;
+        return super.getChildLayoutOptions(child, this.filterContainerOptions(containerOptions)) as HBoxLayoutOptionsExt;
     }
 
     protected override getLayoutOptions(element: SModelElement): HBoxLayoutOptionsExt {
@@ -250,7 +263,11 @@ export class HBoxLayouterExt extends HBoxLayouter {
         };
     }
 
-    protected override spread(a: HBoxLayoutOptionsExt, b: HBoxLayoutOptionsExt): HBoxLayoutOptionsExt {
-        return { ...a, ...b };
+    protected filterContainerOptions(containerOptions: HBoxLayoutOptionsExt): HBoxLayoutOptionsExt {
+        // Reset object-specific layout options to default before merging,
+        // to make sure they won't be inherited (grab, prefSize)
+        // eslint-disable-next-line no-null/no-null
+        const localOptions = { vGrab: false, hGrab: false, prefHeight: null, prefWidth: null };
+        return { ...containerOptions, ...localOptions };
     }
 }