@eclipse-glsp/client 2.2.0-next.333 → 2.2.0-next.334

package/src/base/default.module.ts

@@ -18,6 +18,7 @@ import {
     FeatureModule,
     KeyTool,
     LocationPostprocessor,
+    MousePositionTracker,
     MouseTool,
     MoveCommand,
     SetDirtyStateAction,
@@ -47,6 +48,7 @@ import { DiagramLoader } from './model/diagram-loader';
 import { GLSPModelSource } from './model/glsp-model-source';
 import { DefaultModelInitializationConstraint, ModelInitializationConstraint } from './model/model-initialization-constraint';
 import { GModelRegistry } from './model/model-registry';
+import { GLSPMousePositionTracker } from './mouse-position-tracker';
 import { SelectionClearingMouseListener } from './selection-clearing-mouse-listener';
 import { SelectionService } from './selection-service';
 import { EnableDefaultToolsAction, EnableToolsAction } from './tool-manager/tool';
@@ -85,7 +87,8 @@ export const defaultModule = new FeatureModule((bind, unbind, isBound, rebind, .
     bind(GLSPMouseTool).toSelf().inSingletonScope();
     bindOrRebind(context, MouseTool).toService(GLSPMouseTool);
     bind(TYPES.IDiagramStartup).toService(GLSPMouseTool);
-
+    bind(GLSPMousePositionTracker).toSelf().inSingletonScope();
+    bindOrRebind(context, MousePositionTracker).toService(GLSPMousePositionTracker);
     bind(GLSPKeyTool).toSelf().inSingletonScope();
     bindOrRebind(context, KeyTool).toService(GLSPKeyTool);
     bind(TYPES.IDiagramStartup).toService(GLSPKeyTool);

package/src/base/feedback/css-feedback.ts

@@ -85,14 +85,18 @@ export enum CursorCSS {
     RESIZE_NESW = 'resize-nesw-mode',
     RESIZE_NWSE = 'resize-nwse-mode',
     RESIZE_NW = 'resize-nw-mode',
+    RESIZE_N = 'resize-n-mode',
     RESIZE_NE = 'resize-ne-mode',
-    RESIZE_SW = 'resize-sw-mode',
+    RESIZE_E = 'resize-e-mode',
     RESIZE_SE = 'resize-se-mode',
+    RESIZE_S = 'resize-s-mode',
+    RESIZE_SW = 'resize-sw-mode',
+    RESIZE_W = 'resize-w-mode',
     MOVE = 'move-mode',
     MARQUEE = 'marquee-mode'
 }
 
-export function cursorFeedbackAction(cursorCss?: CursorCSS): ModifyCSSFeedbackAction {
+export function cursorFeedbackAction(cursorCss?: string): ModifyCSSFeedbackAction {
     const add = [];
     if (cursorCss) {
         add.push(cursorCss);
@@ -107,3 +111,7 @@ export function applyCssClasses(element: GModelElement, ...add: string[]): Modif
 export function deleteCssClasses(element: GModelElement, ...remove: string[]): ModifyCSSFeedbackAction {
     return ModifyCSSFeedbackAction.create({ elements: [element], remove });
 }
+
+export function toggleCssClasses(element: GModelElement, add: boolean, ...cssClasses: string[]): ModifyCSSFeedbackAction {
+    return add ? applyCssClasses(element, ...cssClasses) : deleteCssClasses(element, ...cssClasses);
+}

package/src/base/feedback/feeback-emitter.ts

@@ -32,9 +32,12 @@ export class FeedbackEmitter implements IFeedbackEmitter, Disposable {
      * once the {@link submit} method is called.
      *
      * @param action feedback action
-     * @param cleanupAction action that undoes the feedback action. This is only triggered when {@link revert} is called.
+     * @param cleanupAction action that undoes the feedback action. This is only triggered when {@link revert} or {@link dispose} is called.
      */
-    add(action: Action, cleanupAction?: MaybeActions): this {
+    add(action?: Action, cleanupAction?: MaybeActions): this {
+        if (!action && !cleanupAction) {
+            return this;
+        }
         const idx = this.feedbackActions.length;
         this.feedbackActions[idx] = action;
         if (cleanupAction) {
@@ -73,7 +76,7 @@ export class FeedbackEmitter implements IFeedbackEmitter, Disposable {
      * Registers any pending actions as feedback. Any previously submitted feedback becomes invalid.
      */
     submit(): this {
-        // with 'arrayOf' we skip undefined entries that are created for non-cleanup actions
+        // with 'arrayOf' we skip undefined entries that are created for non-cleanup actions or cleanup-only actions
         const actions = arrayOf(...this.feedbackActions);
         const cleanupActions = arrayOf(...this.cleanupActions);
         this.deregistration = this.feedbackDispatcher.registerFeedback(this, actions, () => cleanupActions.flatMap(MaybeActions.asArray));

package/src/base/index.ts

@@ -24,6 +24,7 @@ export * from './editor-context-service';
 export * from './feedback';
 export * from './focus';
 export * from './model';
+export * from './mouse-position-tracker';
 export * from './ranked';
 export * from './selection-clearing-mouse-listener';
 export * from './selection-service';

package/src/base/mouse-position-tracker.ts

@@ -0,0 +1,25 @@
+/********************************************************************************
+ * Copyright (c) 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
+    rank: number;
+ * 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 { MousePositionTracker } from '@eclipse-glsp/sprotty';
+import { injectable } from 'inversify';
+import { Ranked } from './ranked';
+
+@injectable()
+export class GLSPMousePositionTracker extends MousePositionTracker implements Ranked {
+    /* we want to be executed before all default mouse listeners since we are just tracking the position and others may need it */
+    rank = Ranked.DEFAULT_RANK - 200;
+}

package/src/features/accessibility/view-key-tools/movement-key-tool.ts

@@ -20,8 +20,8 @@ import { matchesKeystroke } from 'sprotty/lib/utils/keyboard';
 import { GLSPActionDispatcher } from '../../../base/action-dispatcher';
 import { SelectionService } from '../../../base/selection-service';
 import { Tool } from '../../../base/tool-manager/tool';
-import { unsnapModifier, useSnap } from '../../change-bounds/snap';
 import { Grid } from '../../grid';
+import { ChangeBoundsManager } from '../../tools';
 import { AccessibleKeyShortcutProvider, SetAccessibleKeyShortcutAction } from '../key-shortcut/accessible-key-shortcut';
 import { MoveElementAction, MoveViewportAction } from '../move-zoom/move-handler';
 
@@ -40,7 +40,8 @@ export class MovementKeyTool implements Tool {
     @inject(SelectionService) selectionService: SelectionService;
     @inject(TYPES.ISnapper) @optional() readonly snapper?: ISnapper;
     @inject(TYPES.IActionDispatcher) readonly actionDispatcher: GLSPActionDispatcher;
-    @optional() @inject(TYPES.Grid) protected grid: Grid;
+    @inject(TYPES.Grid) @optional() protected grid: Grid;
+    @inject(TYPES.IChangeBoundsManager) readonly changeBoundsManager: ChangeBoundsManager;
 
     get id(): string {
         return MovementKeyTool.ID;
@@ -86,7 +87,7 @@ export class MoveKeyListener extends KeyListener implements AccessibleKeyShortcu
 
     override keyDown(_element: GModelElement, event: KeyboardEvent): Action[] {
         const selectedElementIds = this.tool.selectionService.getSelectedElementIDs();
-        const snap = useSnap(event);
+        const snap = this.tool.changeBoundsManager.usePositionSnap(event);
         const offsetX = snap ? this.grid.x : 1;
         const offsetY = snap ? this.grid.y : 1;
 
@@ -115,18 +116,22 @@ export class MoveKeyListener extends KeyListener implements AccessibleKeyShortcu
     }
 
     protected matchesMoveUpKeystroke(event: KeyboardEvent): boolean {
-        return matchesKeystroke(event, 'ArrowUp') || matchesKeystroke(event, 'ArrowUp', unsnapModifier());
+        const unsnap = this.tool.changeBoundsManager.unsnapModifier();
+        return matchesKeystroke(event, 'ArrowUp') || (!!unsnap && matchesKeystroke(event, 'ArrowUp', unsnap));
     }
 
     protected matchesMoveDownKeystroke(event: KeyboardEvent): boolean {
-        return matchesKeystroke(event, 'ArrowDown') || matchesKeystroke(event, 'ArrowDown', unsnapModifier());
+        const unsnap = this.tool.changeBoundsManager.unsnapModifier();
+        return matchesKeystroke(event, 'ArrowDown') || (!!unsnap && matchesKeystroke(event, 'ArrowDown', unsnap));
     }
 
     protected matchesMoveRightKeystroke(event: KeyboardEvent): boolean {
-        return matchesKeystroke(event, 'ArrowRight') || matchesKeystroke(event, 'ArrowRight', unsnapModifier());
+        const unsnap = this.tool.changeBoundsManager.unsnapModifier();
+        return matchesKeystroke(event, 'ArrowRight') || (!!unsnap && matchesKeystroke(event, 'ArrowRight', unsnap));
     }
 
     protected matchesMoveLeftKeystroke(event: KeyboardEvent): boolean {
-        return matchesKeystroke(event, 'ArrowLeft') || matchesKeystroke(event, 'ArrowLeft', unsnapModifier());
+        const unsnap = this.tool.changeBoundsManager.unsnapModifier();
+        return matchesKeystroke(event, 'ArrowLeft') || (!!unsnap && matchesKeystroke(event, 'ArrowLeft', unsnap));
     }
 }

package/src/features/bounds/bounds-module.ts

@@ -52,5 +52,7 @@ export const boundsModule = new FeatureModule((bind, _unbind, isBound, _rebind)
     configureLayout(context, HBoxLayouter.KIND, HBoxLayouterExt);
     configureLayout(context, FreeFormLayouter.KIND, FreeFormLayouter);
 
+    // backwards compatibility
+    // eslint-disable-next-line deprecation/deprecation
     bind(PositionSnapper).toSelf();
 });

package/src/features/bounds/freeform-layout.ts

@@ -13,7 +13,6 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-import { injectable } from 'inversify';
 import {
     AbstractLayout,
     AbstractLayoutOptions,
@@ -21,11 +20,13 @@ import {
     BoundsData,
     Dimension,
     GChildElement,
+    GParentElement,
     LayoutContainer,
     Point,
-    GParentElement,
     StatefulLayouter
 } from '@eclipse-glsp/sprotty';
+import { injectable } from 'inversify';
+import { LayoutAware } from './layout-data';
 
 /**
  * Layouts children of a container with explicit X/Y positions
@@ -44,9 +45,11 @@ export class FreeFormLayouter extends AbstractLayout<AbstractLayoutOptions> {
 
         const maxWidth = childrenSize.width > 0 ? childrenSize.width + options.paddingLeft + options.paddingRight : 0;
         const maxHeight = childrenSize.height > 0 ? childrenSize.height + options.paddingTop + options.paddingBottom : 0;
-        if (maxWidth > 0 && maxHeight > 0) {
+        if (childrenSize.width > 0 && childrenSize.height > 0) {
             const offset = this.layoutChildren(container, layouter, options, maxWidth, maxHeight);
-            boundsData.bounds = this.getFinalContainerBounds(container, offset, options, maxWidth, maxHeight);
+            const computed = this.getComputedContainerDimensions(options, childrenSize.width, childrenSize.height);
+            LayoutAware.setComputedDimensions(boundsData, computed);
+            boundsData.bounds = this.getFinalContainerBounds(container, offset, options, computed.width, computed.height);
             boundsData.boundsChanged = true;
         } else {
             boundsData.bounds = { x: boundsData.bounds!.x, y: boundsData.bounds!.y, width: 0, height: 0 };
@@ -96,6 +99,13 @@ export class FreeFormLayouter extends AbstractLayout<AbstractLayoutOptions> {
         return currentOffset;
     }
 
+    protected getComputedContainerDimensions(options: AbstractLayoutOptions, maxWidth: number, maxHeight: number): Dimension {
+        return {
+            width: maxWidth + options.paddingLeft + options.paddingRight,
+            height: maxHeight + options.paddingTop + options.paddingBottom
+        };
+    }
+
     protected override getFinalContainerBounds(
         container: GParentElement & LayoutContainer,
         lastOffset: Point,
@@ -106,8 +116,8 @@ export class FreeFormLayouter extends AbstractLayout<AbstractLayoutOptions> {
         const result = {
             x: container.bounds.x,
             y: container.bounds.y,
-            width: Math.max(options.minWidth, maxWidth + options.paddingLeft + options.paddingRight),
-            height: Math.max(options.minHeight, maxHeight + options.paddingTop + options.paddingBottom)
+            width: Math.max(options.minWidth, maxWidth),
+            height: Math.max(options.minHeight, maxHeight)
         };
 
         return result;

package/src/features/bounds/glsp-hidden-bounds-updater.ts

@@ -18,21 +18,29 @@ import {
     Action,
     BoundsData,
     ComputedBoundsAction,
-    Deferred,
     EdgeRouterRegistry,
+    ElementAndAlignment,
+    ElementAndBounds,
+    ElementAndLayoutData,
     ElementAndRoutingPoints,
+    GChildElement,
     GModelElement,
     HiddenBoundsUpdater,
-    IActionDispatcher,
+    LayoutData,
     ModelIndexImpl,
-    RequestAction,
-    ResponseAction
+    RequestBoundsAction,
+    isLayoutContainer
 } from '@eclipse-glsp/sprotty';
 import { inject, injectable, optional } from 'inversify';
 import { VNode } from 'snabbdom';
 import { BoundsAwareModelElement, calcElementAndRoute, getDescendantIds, isRoutable } from '../../utils/gmodel-util';
+import { LayoutAware } from './layout-data';
 import { LocalComputedBoundsAction, LocalRequestBoundsAction } from './local-bounds';
 
+export class BoundsDataExt extends BoundsData {
+    layoutData?: LayoutData;
+}
+
 /**
  * Grabs the bounds from hidden SVG DOM elements, applies layouts, collects routes and fires {@link ComputedBoundsAction}s.
  *
@@ -44,7 +52,7 @@ export class GLSPHiddenBoundsUpdater extends HiddenBoundsUpdater {
 
     protected element2route: ElementAndRoutingPoints[] = [];
 
-    protected getElement2BoundsData(): Map<BoundsAwareModelElement, BoundsData> {
+    protected getElement2BoundsData(): Map<BoundsAwareModelElement, BoundsDataExt> {
         return this['element2boundsData'];
     }
 
@@ -60,10 +68,56 @@ export class GLSPHiddenBoundsUpdater extends HiddenBoundsUpdater {
         if (LocalRequestBoundsAction.is(cause) && cause.elementIDs) {
             this.focusOnElements(cause.elementIDs);
         }
-        const actions = this.captureActions(() => super.postUpdate(cause));
-        actions
-            .filter(action => ComputedBoundsAction.is(action))
-            .forEach(action => this.actionDispatcher.dispatch(this.enhanceAction(action as ComputedBoundsAction, cause)));
+
+        // collect bounds and layout data in element2BoundsData
+        this.getBoundsFromDOM();
+        this.layouter.layout(this.getElement2BoundsData());
+
+        // prepare data for action
+        const resizes: ElementAndBounds[] = [];
+        const alignments: ElementAndAlignment[] = [];
+        const layoutData: ElementAndLayoutData[] = [];
+        this.getElement2BoundsData().forEach((boundsData, element) => {
+            if (boundsData.boundsChanged && boundsData.bounds !== undefined) {
+                const resize: ElementAndBounds = {
+                    elementId: element.id,
+                    newSize: {
+                        width: boundsData.bounds.width,
+                        height: boundsData.bounds.height
+                    }
+                };
+                // don't copy position if the element is layouted by the server
+                if (element instanceof GChildElement && isLayoutContainer(element.parent)) {
+                    resize.newPosition = {
+                        x: boundsData.bounds.x,
+                        y: boundsData.bounds.y
+                    };
+                }
+                resizes.push(resize);
+            }
+            if (boundsData.alignmentChanged && boundsData.alignment !== undefined) {
+                alignments.push({
+                    elementId: element.id,
+                    newAlignment: boundsData.alignment
+                });
+            }
+            if (LayoutAware.is(boundsData)) {
+                layoutData.push({ elementId: element.id, layoutData: boundsData.layoutData });
+            }
+        });
+        const routes = this.element2route.length === 0 ? undefined : this.element2route;
+
+        // prepare and dispatch action
+        const responseId = (cause as RequestBoundsAction).requestId;
+        const revision = this.root !== undefined ? this.root.revision : undefined;
+        const computedBoundsAction = ComputedBoundsAction.create(resizes, { revision, alignments, layoutData, routes, responseId });
+        if (LocalRequestBoundsAction.is(cause)) {
+            LocalComputedBoundsAction.mark(computedBoundsAction);
+        }
+        this.actionDispatcher.dispatch(computedBoundsAction);
+
+        // cleanup
+        this.getElement2BoundsData().clear();
         this.element2route = [];
     }
 
@@ -82,41 +136,4 @@ export class GLSPHiddenBoundsUpdater extends HiddenBoundsUpdater {
     protected expandElementId(id: string, index: ModelIndexImpl, elementIDs: string[]): string[] {
         return getDescendantIds(index.getById(id));
     }
-
-    protected captureActions(call: () => void): Action[] {
-        const capturingActionDispatcher = new CapturingActionDispatcher();
-        const actualActionDispatcher = this.actionDispatcher;
-        this.actionDispatcher = capturingActionDispatcher;
-        try {
-            call();
-            return capturingActionDispatcher.actions;
-        } finally {
-            this.actionDispatcher = actualActionDispatcher;
-        }
-    }
-
-    protected enhanceAction(action: ComputedBoundsAction, cause?: Action): ComputedBoundsAction {
-        if (LocalRequestBoundsAction.is(cause)) {
-            LocalComputedBoundsAction.mark(action);
-        }
-        action.routes = this.element2route.length === 0 ? undefined : this.element2route;
-        return action;
-    }
-}
-
-class CapturingActionDispatcher implements IActionDispatcher {
-    readonly actions: Action[] = [];
-
-    async dispatch(action: Action): Promise<void> {
-        this.actions.push(action);
-    }
-
-    async dispatchAll(actions: Action[]): Promise<void> {
-        this.actions.push(...actions);
-    }
-
-    async request<Res extends ResponseAction>(action: RequestAction<Res>): Promise<Res> {
-        // ignore, not needed for our purposes
-        return new Deferred<Res>().promise;
-    }
 }

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

@@ -13,22 +13,23 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-import { injectable } from 'inversify';
 import {
     Bounds,
     BoundsData,
     Dimension,
     GChildElement,
+    GModelElement,
+    GParentElement,
     HBoxLayoutOptions,
     HBoxLayouter,
     LayoutContainer,
     Point,
-    GModelElement,
-    GParentElement,
     StatefulLayouter,
     isBoundsAware,
     isLayoutableChild
 } from '@eclipse-glsp/sprotty';
+import { injectable } from 'inversify';
+import { LayoutAware } from './layout-data';
 
 export interface HBoxLayoutOptionsExt extends HBoxLayoutOptions {
     hGrab: boolean;
@@ -79,7 +80,9 @@ export class HBoxLayouterExt extends HBoxLayouter {
 
         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);
+            const computed = this.getComputedContainerDimensions(options, childrenSize.width, childrenSize.height);
+            LayoutAware.setComputedDimensions(boundsData, computed);
+            boundsData.bounds = this.getFinalContainerBounds(container, offset, options, computed.width, computed.height);
             boundsData.boundsChanged = true;
         }
     }
@@ -223,22 +226,28 @@ export class HBoxLayouterExt extends HBoxLayouter {
         return (element as any).layoutOptions;
     }
 
+    protected getComputedContainerDimensions(options: HBoxLayoutOptionsExt, maxWidth: number, maxHeight: number): Dimension {
+        return {
+            width: maxWidth + options.paddingLeft + options.paddingRight,
+            height: maxHeight + options.paddingTop + options.paddingBottom
+        };
+    }
+
     protected override getFinalContainerBounds(
         container: GParentElement & LayoutContainer,
         lastOffset: Point,
         options: HBoxLayoutOptionsExt,
-        maxWidth: number,
-        maxHeight: number
+        computedWidth: number,
+        computedHeight: number
     ): Bounds {
         const elementOptions = this.getElementLayoutOptions(container);
         const width = elementOptions?.prefWidth ?? options.minWidth;
         const height = elementOptions?.prefHeight ?? options.minHeight;
-
         const result = {
             x: container.bounds.x,
             y: container.bounds.y,
-            width: Math.max(width, maxWidth + options.paddingLeft + options.paddingRight),
-            height: Math.max(height, maxHeight + options.paddingTop + options.paddingBottom)
+            width: Math.max(width, computedWidth),
+            height: Math.max(height, computedHeight)
         };
 
         return result;

package/src/features/bounds/index.ts

@@ -17,6 +17,7 @@ export * from './bounds-module';
 export * from './freeform-layout';
 export * from './glsp-hidden-bounds-updater';
 export * from './hbox-layout';
+export * from './layout-data';
 export * from './layouter';
 export * from './local-bounds';
 export * from './set-bounds-feedback-command';

package/src/features/bounds/layout-data.ts

@@ -0,0 +1,48 @@
+/********************************************************************************
+ * Copyright (c) 2024 Axon Ivy AG 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 { Dimension, LayoutData } from '@eclipse-glsp/sprotty';
+
+export interface LayoutAware {
+    layoutData: LayoutData;
+}
+
+export namespace LayoutAware {
+    export function is<T extends object>(element: T): element is T & LayoutAware {
+        return 'layoutData' in element;
+    }
+
+    export function getLayoutData<T extends object>(element: T): LayoutData | undefined {
+        return is(element) ? element.layoutData : undefined;
+    }
+
+    export function setLayoutData<T extends object>(element: T, data: LayoutData): void {
+        (element as LayoutAware).layoutData = data;
+    }
+
+    export function setComputedDimensions<T extends object>(element: T, computedDimensions: Dimension): void {
+        ensureLayoutAware(element).layoutData.computedDimensions = computedDimensions;
+    }
+
+    export function getComputedDimensions<T extends object>(element: T): Dimension | undefined {
+        return getLayoutData(element)?.computedDimensions;
+    }
+
+    function ensureLayoutAware<T extends object>(element: T): T & LayoutAware {
+        (element as LayoutAware).layoutData = (element as LayoutAware).layoutData ?? {};
+        return element as T & LayoutAware;
+    }
+}

package/src/features/bounds/local-bounds.ts

@@ -31,6 +31,7 @@ import {
 } from '@eclipse-glsp/sprotty';
 import { inject, injectable } from 'inversify';
 import { ServerAction } from '../../base/model/glsp-model-source';
+import { LayoutAware } from './layout-data';
 
 export interface LocalRequestBoundsAction extends RequestBoundsAction {
     elementIDs?: string[];
@@ -41,9 +42,11 @@ export namespace LocalRequestBoundsAction {
         return RequestBoundsAction.is(object) && !ServerAction.is(object) && hasArrayProp(object, 'elementIDs', true);
     }
 
-    export function create(newRoot: GModelRootSchema, elementIDs?: string[]): LocalRequestBoundsAction {
+    export function create(newRoot: GModelRoot, elementIDs?: string[]): LocalRequestBoundsAction;
+    export function create(newRoot: GModelRootSchema, elementIDs?: string[]): LocalRequestBoundsAction;
+    export function create(newRoot: GModelRoot | GModelRootSchema, elementIDs?: string[]): LocalRequestBoundsAction {
         return {
-            ...RequestBoundsAction.create(newRoot),
+            ...RequestBoundsAction.create(newRoot as unknown as GModelRootSchema),
             elementIDs
         };
     }
@@ -55,7 +58,7 @@ export namespace LocalRequestBoundsAction {
         elementIDs?: string[]
     ): CommandResult {
         // do not modify the main model (modelChanged = false) but request local bounds calculation on hidden model
-        actionDispatcher.dispatch(LocalRequestBoundsAction.create(root as unknown as GModelRootSchema, elementIDs));
+        actionDispatcher.dispatch(LocalRequestBoundsAction.create(root, elementIDs));
         return {
             model: root,
             modelChanged: false,
@@ -65,7 +68,7 @@ export namespace LocalRequestBoundsAction {
 }
 
 export namespace LocalComputedBoundsAction {
-    export function is(object: unknown): object is RequestBoundsAction {
+    export function is(object: unknown): object is ComputedBoundsAction & ServerAction {
         return ComputedBoundsAction.is(object) && ServerAction.is(object);
     }
 
@@ -94,9 +97,22 @@ export class LocalComputedBoundsCommand extends Command {
             }
             // apply computed bounds from the hidden model and return updated model to render new main model
             this.computedBoundsApplicator.apply(context.root as unknown as GModelRootSchema, this.action);
+            this.action.layoutData?.forEach(({ elementId, layoutData }) => {
+                const element = context.root.index.getById(elementId);
+                if (element !== undefined) {
+                    LayoutAware.setLayoutData(element, layoutData);
+                }
+            });
             return context.root;
         }
 
+        this.action.layoutData?.forEach(({ elementId, layoutData }) => {
+            const element = context.root.index.getById(elementId);
+            if (element !== undefined) {
+                LayoutAware.setLayoutData(element, layoutData);
+            }
+        });
+
         // computed bounds action from server -> we do not care and do not trigger any update of the main model
         return {
             model: context.root,

package/src/features/bounds/vbox-layout.ts

@@ -13,22 +13,23 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-import { injectable } from 'inversify';
 import {
     Bounds,
     BoundsData,
     Dimension,
     GChildElement,
-    LayoutContainer,
-    Point,
     GModelElement,
     GParentElement,
+    LayoutContainer,
+    Point,
     StatefulLayouter,
     VBoxLayoutOptions,
     VBoxLayouter,
     isBoundsAware,
     isLayoutableChild
 } from '@eclipse-glsp/sprotty';
+import { injectable } from 'inversify';
+import { LayoutAware } from './layout-data';
 
 export interface VBoxLayoutOptionsExt extends VBoxLayoutOptions {
     hGrab: boolean;
@@ -79,7 +80,9 @@ export class VBoxLayouterExt extends VBoxLayouter {
 
         if (maxWidth > 0 && maxHeight > 0) {
             const offset = this.layoutChildren(container, layouter, options, width, height, grabHeight, grabbingChildren);
-            boundsData.bounds = this.getFinalContainerBounds(container, offset, options, childrenSize.width, childrenSize.height);
+            const computed = this.getComputedContainerDimensions(options, childrenSize.width, childrenSize.height);
+            LayoutAware.setComputedDimensions(boundsData, computed);
+            boundsData.bounds = this.getFinalContainerBounds(container, offset, options, computed.width, computed.height);
             boundsData.boundsChanged = true;
         }
     }
@@ -223,24 +226,29 @@ export class VBoxLayouterExt extends VBoxLayouter {
         return (element as any).layoutOptions;
     }
 
+    protected getComputedContainerDimensions(options: VBoxLayoutOptionsExt, maxWidth: number, maxHeight: number): Dimension {
+        return {
+            width: maxWidth + options.paddingLeft + options.paddingRight,
+            height: maxHeight + options.paddingTop + options.paddingBottom
+        };
+    }
+
     protected override getFinalContainerBounds(
         container: GParentElement & LayoutContainer,
         lastOffset: Point,
         options: VBoxLayoutOptionsExt,
-        maxWidth: number,
-        maxHeight: number
+        computedWidth: number,
+        computedHeight: number
     ): Bounds {
         const elementOptions = this.getElementLayoutOptions(container);
         const width = elementOptions?.prefWidth ?? options.minWidth;
         const height = elementOptions?.prefHeight ?? options.minHeight;
-
         const result = {
             x: container.bounds.x,
             y: container.bounds.y,
-            width: Math.max(width, maxWidth + options.paddingLeft + options.paddingRight),
-            height: Math.max(height, maxHeight + options.paddingTop + options.paddingBottom)
+            width: Math.max(width, computedWidth),
+            height: Math.max(height, computedHeight)
         };
-
         return result;
     }
 

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

@@ -18,3 +18,4 @@ export * from './movement-restrictor';
 export * from './point-position-updater';
 export * from './position-snapper';
 export * from './snap';
+export * from './tracker';