@eclipse-glsp/client 0.9.0-next.d0112315 → 0.9.0-next.f12e3d87

package/src/features/layout/layout-commands.spec.ts

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2019 EclipseSource and others.
+ * Copyright (c) 2019-2021 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
@@ -58,7 +58,7 @@ import {
 } from './layout-commands';
 
 class MockActionDispatcher implements IActionDispatcher {
-    constructor(public dispatchedActions: Action[] = []) { }
+    constructor(public dispatchedActions: Action[] = []) {}
     dispatch(action: Action): Promise<void> {
         this.dispatchedActions.push(action);
         return Promise.resolve();
@@ -84,15 +84,18 @@ const selectionService = container.get<SelectionService>(GLSP_TYPES.SelectionSer
 const actionDispatcher = new MockActionDispatcher();
 
 const node1 = {
-    id: 'node1', type: 'node:circle',
+    id: 'node1',
+    type: 'node:circle',
     selected: true
 };
 const node2 = {
-    id: 'node2', type: 'node:circle',
+    id: 'node2',
+    type: 'node:circle',
     selected: true
 };
 const node3 = {
-    id: 'node3', type: 'node:circle',
+    id: 'node3',
+    type: 'node:circle',
     selected: true
 };
 const model = createModel();
@@ -123,7 +126,6 @@ const context: CommandExecutionContext = {
 const defaultSize = { height: 10, width: 10 };
 
 describe('AlignElementsCommand', () => {
-
     it('should align all elements left', () => {
         actionDispatcher.dispatchedActions = [];
         const newModel = initModel([
@@ -135,11 +137,13 @@ describe('AlignElementsCommand', () => {
         const command = new AlignElementsCommand(action, actionDispatcher, selectionService);
         command.execute(newContext(newModel));
 
-        assertAllBounds(new Map([
-            ['node1', { x: 111, y: 111, width: defaultSize.width, height: defaultSize.height }],
-            ['node2', { x: 111, y: 222, width: defaultSize.width, height: defaultSize.height }],
-            ['node3', { x: 111, y: 333, width: defaultSize.width, height: defaultSize.height }]
-        ]));
+        assertAllBounds(
+            new Map([
+                ['node1', { x: 111, y: 111, width: defaultSize.width, height: defaultSize.height }],
+                ['node2', { x: 111, y: 222, width: defaultSize.width, height: defaultSize.height }],
+                ['node3', { x: 111, y: 333, width: defaultSize.width, height: defaultSize.height }]
+            ])
+        );
     });
 
     it('should align all elements right', () => {
@@ -153,11 +157,13 @@ describe('AlignElementsCommand', () => {
         const command = new AlignElementsCommand(action, actionDispatcher, selectionService);
         command.execute(newContext(newModel));
 
-        assertAllBounds(new Map([
-            ['node1', { x: 333, y: 111, width: defaultSize.width, height: defaultSize.height }],
-            ['node2', { x: 333, y: 222, width: defaultSize.width, height: defaultSize.height }],
-            ['node3', { x: 333, y: 333, width: defaultSize.width, height: defaultSize.height }]
-        ]));
+        assertAllBounds(
+            new Map([
+                ['node1', { x: 333, y: 111, width: defaultSize.width, height: defaultSize.height }],
+                ['node2', { x: 333, y: 222, width: defaultSize.width, height: defaultSize.height }],
+                ['node3', { x: 333, y: 333, width: defaultSize.width, height: defaultSize.height }]
+            ])
+        );
     });
 
     it('should align all elements center', () => {
@@ -171,11 +177,13 @@ describe('AlignElementsCommand', () => {
         const command = new AlignElementsCommand(action, actionDispatcher, selectionService);
         command.execute(newContext(newModel));
 
-        assertAllBounds(new Map([
-            ['node1', { x: 222, y: 111, width: defaultSize.width, height: defaultSize.height }],
-            ['node2', { x: 222, y: 222, width: defaultSize.width, height: defaultSize.height }],
-            ['node3', { x: 222, y: 333, width: defaultSize.width, height: defaultSize.height }]
-        ]));
+        assertAllBounds(
+            new Map([
+                ['node1', { x: 222, y: 111, width: defaultSize.width, height: defaultSize.height }],
+                ['node2', { x: 222, y: 222, width: defaultSize.width, height: defaultSize.height }],
+                ['node3', { x: 222, y: 333, width: defaultSize.width, height: defaultSize.height }]
+            ])
+        );
     });
 
     it('should align all elements top', () => {
@@ -189,11 +197,13 @@ describe('AlignElementsCommand', () => {
         const command = new AlignElementsCommand(action, actionDispatcher, selectionService);
         command.execute(newContext(newModel));
 
-        assertAllBounds(new Map([
-            ['node1', { x: 111, y: 111, width: defaultSize.width, height: defaultSize.height }],
-            ['node2', { x: 222, y: 111, width: defaultSize.width, height: defaultSize.height }],
-            ['node3', { x: 333, y: 111, width: defaultSize.width, height: defaultSize.height }]
-        ]));
+        assertAllBounds(
+            new Map([
+                ['node1', { x: 111, y: 111, width: defaultSize.width, height: defaultSize.height }],
+                ['node2', { x: 222, y: 111, width: defaultSize.width, height: defaultSize.height }],
+                ['node3', { x: 333, y: 111, width: defaultSize.width, height: defaultSize.height }]
+            ])
+        );
     });
 
     it('should align all elements bottom', () => {
@@ -207,11 +217,13 @@ describe('AlignElementsCommand', () => {
         const command = new AlignElementsCommand(action, actionDispatcher, selectionService);
         command.execute(newContext(newModel));
 
-        assertAllBounds(new Map([
-            ['node1', { x: 111, y: 333, width: defaultSize.width, height: defaultSize.height }],
-            ['node2', { x: 222, y: 333, width: defaultSize.width, height: defaultSize.height }],
-            ['node3', { x: 333, y: 333, width: defaultSize.width, height: defaultSize.height }]
-        ]));
+        assertAllBounds(
+            new Map([
+                ['node1', { x: 111, y: 333, width: defaultSize.width, height: defaultSize.height }],
+                ['node2', { x: 222, y: 333, width: defaultSize.width, height: defaultSize.height }],
+                ['node3', { x: 333, y: 333, width: defaultSize.width, height: defaultSize.height }]
+            ])
+        );
     });
 
     it('should align all elements middle', () => {
@@ -225,17 +237,17 @@ describe('AlignElementsCommand', () => {
         const command = new AlignElementsCommand(action, actionDispatcher, selectionService);
         command.execute(newContext(newModel));
 
-        assertAllBounds(new Map([
-            ['node1', { x: 111, y: 222, width: defaultSize.width, height: defaultSize.height }],
-            ['node2', { x: 222, y: 222, width: defaultSize.width, height: defaultSize.height }],
-            ['node3', { x: 333, y: 222, width: defaultSize.width, height: defaultSize.height }]
-        ]));
+        assertAllBounds(
+            new Map([
+                ['node1', { x: 111, y: 222, width: defaultSize.width, height: defaultSize.height }],
+                ['node2', { x: 222, y: 222, width: defaultSize.width, height: defaultSize.height }],
+                ['node3', { x: 333, y: 222, width: defaultSize.width, height: defaultSize.height }]
+            ])
+        );
     });
-
 });
 
 describe('ResizeElementsCommand', () => {
-
     it('should make same width as last', () => {
         actionDispatcher.dispatchedActions = [];
         const newModel = initModel([
@@ -248,11 +260,13 @@ describe('ResizeElementsCommand', () => {
         command.execute(newContext(newModel));
 
         // resize is keeping the center, so the X moves by diff / 2
-        assertAllBoundsInChangeBounds(new Map([
-            ['node1', { x: 90, y: 100, height: 10, width: 30 }],
-            ['node2', { x: 95, y: 200, height: 20, width: 30 }],
-            ['node3', { x: 100, y: 300, height: 30, width: 30 }]
-        ]));
+        assertAllBoundsInChangeBounds(
+            new Map([
+                ['node1', { x: 90, y: 100, height: 10, width: 30 }],
+                ['node2', { x: 95, y: 200, height: 20, width: 30 }],
+                ['node3', { x: 100, y: 300, height: 30, width: 30 }]
+            ])
+        );
     });
 
     it('should make same height as last', () => {
@@ -267,11 +281,13 @@ describe('ResizeElementsCommand', () => {
         command.execute(newContext(newModel));
 
         // resize is keeping the center, so the Y moves by diff / 2
-        assertAllBoundsInChangeBounds(new Map([
-            ['node1', { x: 100, y: 90, height: 30, width: 10 }],
-            ['node2', { x: 100, y: 195, height: 30, width: 20 }],
-            ['node3', { x: 100, y: 300, height: 30, width: 30 }]
-        ]));
+        assertAllBoundsInChangeBounds(
+            new Map([
+                ['node1', { x: 100, y: 90, height: 30, width: 10 }],
+                ['node2', { x: 100, y: 195, height: 30, width: 20 }],
+                ['node3', { x: 100, y: 300, height: 30, width: 30 }]
+            ])
+        );
     });
 
     it('should make same width and height as last', () => {
@@ -286,13 +302,14 @@ describe('ResizeElementsCommand', () => {
         command.execute(newContext(newModel));
 
         // resize is keeping the center, so the Y moves by diff / 2
-        assertAllBoundsInChangeBounds(new Map([
-            ['node1', { x: 90, y: 90, height: 30, width: 30 }],
-            ['node2', { x: 95, y: 195, height: 30, width: 30 }],
-            ['node3', { x: 100, y: 300, height: 30, width: 30 }]
-        ]));
+        assertAllBoundsInChangeBounds(
+            new Map([
+                ['node1', { x: 90, y: 90, height: 30, width: 30 }],
+                ['node2', { x: 95, y: 195, height: 30, width: 30 }],
+                ['node3', { x: 100, y: 300, height: 30, width: 30 }]
+            ])
+        );
     });
-
 });
 
 function initModel(elementAndBounds: ElementAndBounds[]): SModelRoot {
@@ -350,11 +367,17 @@ function getElementAndBoundsById(id: string, elementAndBounds: ElementAndBounds[
 }
 
 function dispatchedElementMoves(): ElementMove[] {
-    return actionDispatcher.dispatchedActions.filter(isMoveAction).map(a => a.moves).reduce((acc, val) => acc.concat(val), []);
+    return actionDispatcher.dispatchedActions
+        .filter(isMoveAction)
+        .map(a => a.moves)
+        .reduce((acc, val) => acc.concat(val), []);
 }
 
 function dispatchedChangeBounds(): ElementAndBounds[] {
-    return actionDispatcher.dispatchedActions.filter(isChangeBounds).map(a => a.newBounds).reduce((acc, val) => acc.concat(val), []);
+    return actionDispatcher.dispatchedActions
+        .filter(isChangeBounds)
+        .map(a => a.newBounds)
+        .reduce((acc, val) => acc.concat(val), []);
 }
 
 function isMoveAction(action: Action): action is MoveAction {

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

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2019 EclipseSource and others.
+ * Copyright (c) 2019-2021 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
@@ -27,24 +27,18 @@ import {
     SModelElement,
     TYPES
 } from 'sprotty';
-
 import { ChangeBoundsOperation } from '../../base/operations/operation';
 import { GLSP_TYPES } from '../../base/types';
-import {
-    toValidElementAndBounds,
-    toValidElementMove,
-    WriteableElementAndBounds,
-    WriteableElementMove
-} from '../../utils/layout-utils';
+import { toValidElementAndBounds, toValidElementMove, WriteableElementAndBounds, WriteableElementMove } from '../../utils/layout-utils';
 import { BoundsAwareModelElement } from '../../utils/smodel-util';
 import { isBoundsAwareMoveable, isResizable } from '../change-bounds/model';
 import { IMovementRestrictor } from '../change-bounds/movement-restrictor';
 import { SelectionService } from '../select/selection-service';
 
+// eslint-disable-next-line no-shadow
 export enum ResizeDimension {
     Width,
     Height,
-    // eslint-disable-next-line @typescript-eslint/camelcase
     Width_And_Height
 }
 
@@ -84,10 +78,11 @@ export class ResizeElementsAction implements Action {
          * Function to reduce the dimension to a target dimension value, see Reduce.* for potential functions.
          */
         public readonly reductionFunction: (...values: number[]) => number,
-        public readonly kind: string = ResizeElementsCommand.KIND) {
-    }
+        public readonly kind: string = ResizeElementsCommand.KIND
+    ) {}
 }
 
+// eslint-disable-next-line no-shadow
 export enum Alignment {
     Left,
     Center,
@@ -125,16 +120,18 @@ export class AlignElementsAction implements Action {
          * Function to selected elements that are considered during alignment calculation, see Select.* for potential functions.
          */
         public readonly selectionFunction: (elements: BoundsAwareModelElement[]) => BoundsAwareModelElement[] = Select.all,
-        public readonly kind = AlignElementsCommand.KIND) {
-    }
+        public readonly kind = AlignElementsCommand.KIND
+    ) {}
 }
 
 @injectable()
 abstract class LayoutElementsCommand extends Command {
-    constructor(@inject(TYPES.Action) protected action: ResizeElementsAction | AlignElementsAction,
+    constructor(
+        @inject(TYPES.Action) protected action: ResizeElementsAction | AlignElementsAction,
         @inject(TYPES.IActionDispatcher) protected actionDispatcher: IActionDispatcher,
         @inject(GLSP_TYPES.SelectionService) protected selectionService: SelectionService,
-        @inject(GLSP_TYPES.IMovementRestrictor) @optional() readonly movementRestrictor?: IMovementRestrictor) {
+        @inject(GLSP_TYPES.IMovementRestrictor) @optional() readonly movementRestrictor?: IMovementRestrictor
+    ) {
         super();
     }
 
@@ -170,10 +167,12 @@ abstract class LayoutElementsCommand extends Command {
 export class ResizeElementsCommand extends LayoutElementsCommand {
     static readonly KIND = 'layout:resize';
 
-    constructor(@inject(TYPES.Action) protected action: ResizeElementsAction,
+    constructor(
+        @inject(TYPES.Action) protected action: ResizeElementsAction,
         @inject(TYPES.IActionDispatcher) protected actionDispatcher: IActionDispatcher,
         @inject(GLSP_TYPES.SelectionService) protected selectionService: SelectionService,
-        @inject(GLSP_TYPES.IMovementRestrictor) @optional() readonly movementRestrictor?: IMovementRestrictor) {
+        @inject(GLSP_TYPES.IMovementRestrictor) @optional() readonly movementRestrictor?: IMovementRestrictor
+    ) {
         super(action, actionDispatcher, selectionService, movementRestrictor);
     }
 
@@ -233,7 +232,10 @@ export class ResizeElementsCommand extends LayoutElementsCommand {
         });
     }
 
-    dispatchResizeActions(elements: BoundsAwareModelElement[], change: (element: BoundsAwareModelElement, bounds: WriteableElementAndBounds) => void): void {
+    dispatchResizeActions(
+        elements: BoundsAwareModelElement[],
+        change: (element: BoundsAwareModelElement, bounds: WriteableElementAndBounds) => void
+    ): void {
         const elementAndBounds: ElementAndBounds[] = []; // client- and server-side resize
         elements.forEach(element => {
             const elementChange = this.createElementAndBounds(element, change);
@@ -245,9 +247,10 @@ export class ResizeElementsCommand extends LayoutElementsCommand {
         this.dispatchActions([new SetBoundsAction(elementAndBounds), new ChangeBoundsOperation(elementAndBounds)]);
     }
 
-    createElementAndBounds(element: BoundsAwareModelElement, change: (element: BoundsAwareModelElement,
-        bounds: WriteableElementAndBounds) => void): WriteableElementAndBounds | undefined {
-
+    createElementAndBounds(
+        element: BoundsAwareModelElement,
+        change: (_element: BoundsAwareModelElement, _bounds: WriteableElementAndBounds) => void
+    ): WriteableElementAndBounds | undefined {
         const bounds: WriteableElementAndBounds = {
             elementId: element.id,
             newPosition: {
@@ -278,10 +281,12 @@ export class ResizeElementsCommand extends LayoutElementsCommand {
 export class AlignElementsCommand extends LayoutElementsCommand {
     static readonly KIND = 'layout:align';
 
-    constructor(@inject(TYPES.Action) protected action: AlignElementsAction,
+    constructor(
+        @inject(TYPES.Action) protected action: AlignElementsAction,
         @inject(TYPES.IActionDispatcher) protected actionDispatcher: IActionDispatcher,
         @inject(GLSP_TYPES.SelectionService) protected selectionService: SelectionService,
-        @inject(GLSP_TYPES.IMovementRestrictor) @optional() readonly movementRestrictor?: IMovementRestrictor) {
+        @inject(GLSP_TYPES.IMovementRestrictor) @optional() readonly movementRestrictor?: IMovementRestrictor
+    ) {
         super(action, actionDispatcher, selectionService, movementRestrictor);
     }
 
@@ -319,7 +324,7 @@ export class AlignElementsCommand extends LayoutElementsCommand {
     alignLeft(elements: BoundsAwareModelElement[]): void {
         const calculationElements = this.action.selectionFunction(elements);
         const minX = calculationElements.map(element => element.bounds.x).reduce((a, b) => Math.min(a, b));
-        this.dispatchAlignActions(elements, (_, move) => move.toPosition.x = minX);
+        this.dispatchAlignActions(elements, (_, move) => (move.toPosition.x = minX));
     }
 
     alignCenter(elements: BoundsAwareModelElement[]): void {
@@ -328,19 +333,19 @@ export class AlignElementsCommand extends LayoutElementsCommand {
         const maxX = calculationElements.map(element => element.bounds.x + element.bounds.width).reduce((a, b) => Math.max(a, b));
         const diffX = maxX - minX;
         const centerX = minX + 0.5 * diffX;
-        this.dispatchAlignActions(elements, (element, move) => move.toPosition.x = centerX - 0.5 * element.bounds.width);
+        this.dispatchAlignActions(elements, (element, move) => (move.toPosition.x = centerX - 0.5 * element.bounds.width));
     }
 
     alignRight(elements: BoundsAwareModelElement[]): void {
         const calculationElements = this.action.selectionFunction(elements);
         const maxX = calculationElements.map(element => element.bounds.x + element.bounds.width).reduce((a, b) => Math.max(a, b));
-        this.dispatchAlignActions(elements, (element, move) => move.toPosition.x = maxX - element.bounds.width);
+        this.dispatchAlignActions(elements, (element, move) => (move.toPosition.x = maxX - element.bounds.width));
     }
 
     alignTop(elements: BoundsAwareModelElement[]): void {
         const calculationElements = this.action.selectionFunction(elements);
         const minY = calculationElements.map(element => element.bounds.y).reduce((a, b) => Math.min(a, b));
-        this.dispatchAlignActions(elements, (_, move) => move.toPosition.y = minY);
+        this.dispatchAlignActions(elements, (_, move) => (move.toPosition.y = minY));
     }
 
     alignMiddle(elements: BoundsAwareModelElement[]): void {
@@ -349,16 +354,19 @@ export class AlignElementsCommand extends LayoutElementsCommand {
         const maxY = calculationElements.map(element => element.bounds.y + element.bounds.height).reduce((a, b) => Math.max(a, b));
         const diffY = maxY - minY;
         const middleY = minY + 0.5 * diffY;
-        this.dispatchAlignActions(elements, (element, move) => move.toPosition.y = middleY - 0.5 * element.bounds.height);
+        this.dispatchAlignActions(elements, (element, move) => (move.toPosition.y = middleY - 0.5 * element.bounds.height));
     }
 
     alignBottom(elements: BoundsAwareModelElement[]): void {
         const calculationElements = this.action.selectionFunction(elements);
         const maxY = calculationElements.map(element => element.bounds.y + element.bounds.height).reduce((a, b) => Math.max(a, b));
-        this.dispatchAlignActions(elements, (element, move) => move.toPosition.y = maxY - element.bounds.height);
+        this.dispatchAlignActions(elements, (element, move) => (move.toPosition.y = maxY - element.bounds.height));
     }
 
-    dispatchAlignActions(elements: BoundsAwareModelElement[], change: (element: BoundsAwareModelElement, move: WriteableElementMove) => void): void {
+    dispatchAlignActions(
+        elements: BoundsAwareModelElement[],
+        change: (element: BoundsAwareModelElement, move: WriteableElementMove) => void
+    ): void {
         const moves: ElementMove[] = []; // client-side move
         const elementAndBounds: ElementAndBounds[] = []; // server-side move
         elements.forEach(element => {
@@ -373,7 +381,10 @@ export class AlignElementsCommand extends LayoutElementsCommand {
         this.dispatchActions([new MoveAction(moves), new ChangeBoundsOperation(elementAndBounds)]);
     }
 
-    createElementMove(element: BoundsAwareModelElement, change: (element: BoundsAwareModelElement, move: WriteableElementMove) => void): WriteableElementMove | undefined {
+    createElementMove(
+        element: BoundsAwareModelElement,
+        change: (_element: BoundsAwareModelElement, _move: WriteableElementMove) => void
+    ): WriteableElementMove | undefined {
         const move: WriteableElementMove = {
             elementId: element.id,
             fromPosition: {

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

@@ -0,0 +1,241 @@
+/********************************************************************************
+ * Copyright (c) 2021 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 { injectable } from 'inversify';
+import {
+    Bounds,
+    BoundsData,
+    Dimension,
+    EMPTY_BOUNDS,
+    isBoundsAware,
+    isLayoutableChild,
+    isValidDimension,
+    LayoutContainer,
+    Point,
+    SChildElement,
+    SModelElement,
+    SParentElement,
+    StatefulLayouter,
+    VBoxLayouter,
+    VBoxLayoutOptions
+} from 'sprotty';
+
+export interface VBoxLayoutOptionsExt extends VBoxLayoutOptions {
+    hGrab: boolean;
+    vGrab: boolean;
+    prefWidth: number | null;
+    prefHeight: number | null;
+}
+
+/**
+  * Extends VBoxLayouter to support additional layout options
+  */
+ @injectable()
+ export class VBoxLayouterExt extends VBoxLayouter {
+
+    static KIND = VBoxLayouter.KIND;
+
+    layout(container: SParentElement & LayoutContainer,
+        layouter: StatefulLayouter): void {
+
+        const boundsData = layouter.getBoundsData(container);
+        const options = this.getLayoutOptions(container);
+        const childrenSize = this.getChildrenSize(container, options, layouter);
+
+        const fixedSize = this.getFixedContainerBounds(container, options, layouter);
+
+        const maxWidth = options.paddingFactor * (
+            options.resizeContainer
+                ? Math.max(fixedSize.width - options.paddingLeft - options.paddingRight, childrenSize.width)
+                : Math.max(0, fixedSize.width - options.paddingLeft - options.paddingRight));
+        const maxHeight = options.paddingFactor * (
+            options.resizeContainer
+                ? Math.max(fixedSize.height - options.paddingTop - options.paddingBottom, childrenSize.height)
+                : Math.max(0, fixedSize.height - options.paddingTop - options.paddingBottom));
+
+        // Remaining size that can be grabbed by children with the vGrab option
+        const grabHeight: number = maxHeight - childrenSize.height;
+        // Number of children that request vGrab
+        // FIXME: This approach works fine when only 1 child uses VGrab, but may cause rounding issues
+        // when the grabHeight can't be equally shared by all children.
+        const grabbingChildren = container.children
+            .map(child => this.getChildLayoutOptions(child, options))
+            .filter(opt => opt.vGrab)
+            .length;
+
+        if (maxWidth > 0 && maxHeight > 0) {
+            const offset = this.layoutChildren(container, layouter, options, maxWidth, maxHeight, grabHeight, grabbingChildren);
+            boundsData.bounds = this.getFinalContainerBounds(container, offset, options, childrenSize.width, childrenSize.height);
+            boundsData.boundsChanged = true;
+        }
+    }
+
+    protected getChildrenSize(container: SParentElement & LayoutContainer,
+        containerOptions: VBoxLayoutOptionsExt,
+        layouter: StatefulLayouter): Dimension {
+        let maxWidth = -1;
+        let maxHeight = 0;
+        let isFirst = true;
+        container.children.forEach(
+            child => {
+                if (isLayoutableChild(child)) {
+                    const bounds = layouter.getBoundsData(child).bounds;
+                    if (bounds !== undefined && isValidDimension(bounds)) {
+                        maxHeight += bounds.height;
+                        if (isFirst) {
+                            isFirst = false;
+                        } else {
+                            maxHeight += containerOptions.vGap;
+                        }
+                        maxWidth = Math.max(maxWidth, bounds.width);
+                    }
+                }
+            }
+        );
+        const result = {
+            width: maxWidth,
+            height: maxHeight
+        };
+        return result;
+    }
+
+    protected layoutChildren(container: SParentElement & LayoutContainer,
+        layouter: StatefulLayouter,
+        containerOptions: VBoxLayoutOptionsExt,
+        maxWidth: number,
+        maxHeight: number, grabHeight?: number, grabbingChildren?: number): Point {
+        let currentOffset: Point = {
+            x: containerOptions.paddingLeft + 0.5 * (maxWidth - (maxWidth / containerOptions.paddingFactor)),
+            y: containerOptions.paddingTop + 0.5 * (maxHeight - (maxHeight / containerOptions.paddingFactor))
+        };
+
+        container.children.forEach(
+            child => {
+                if (isLayoutableChild(child)) {
+                    const boundsData = layouter.getBoundsData(child);
+                    const bounds = boundsData.bounds;
+                    const childOptions = this.getChildLayoutOptions(child, containerOptions);
+                    if (bounds !== undefined && isValidDimension(bounds)) {
+                        currentOffset = this.layoutChild(child, boundsData, bounds,
+                            childOptions, containerOptions, currentOffset,
+                            maxWidth, maxHeight, grabHeight, grabbingChildren);
+                    }
+                }
+            }
+        );
+        return currentOffset;
+    }
+
+    protected layoutChild(child: SChildElement,
+        boundsData: BoundsData,
+        bounds: Bounds,
+        childOptions: VBoxLayoutOptionsExt,
+        containerOptions: VBoxLayoutOptionsExt,
+        currentOffset: Point,
+        maxWidth: number,
+        maxHeight: number,
+        grabHeight?: number,
+        grabbingChildren?: number): Point {
+        let offset = super.layoutChild(child, boundsData, bounds, childOptions, containerOptions, currentOffset, maxWidth, maxHeight);
+        if (childOptions.hGrab) {
+            boundsData.bounds = {
+                x: boundsData.bounds!.x,
+                y: boundsData.bounds!.y,
+                width: maxWidth,
+                height: boundsData.bounds!.height
+            };
+            boundsData.boundsChanged = true;
+        }
+        if (childOptions.vGrab && grabHeight && grabbingChildren) {
+            const height = boundsData.bounds!.height + (grabHeight / grabbingChildren);
+            boundsData.bounds = {
+                x: boundsData.bounds!.x,
+                y: boundsData.bounds!.y,
+                width: boundsData.bounds!.width,
+                height: height
+            };
+            boundsData.boundsChanged = true;
+            offset = { x: currentOffset.x, y: currentOffset.y + height };
+        }
+        return offset;
+    }
+
+    protected getFixedContainerBounds(container: SModelElement, layoutOptions: VBoxLayoutOptionsExt, layouter: StatefulLayouter): Bounds {
+        const currentContainer = container;
+        // eslint-disable-next-line no-constant-condition
+        if (isBoundsAware(currentContainer)) {
+            const bounds = currentContainer.bounds;
+            const elementOptions = this.getElementLayoutOptions(currentContainer);
+            const width = elementOptions?.prefWidth ?? 0;
+            const height = elementOptions?.prefHeight ?? 0;
+            return { ...bounds, width, height };
+        }
+        return EMPTY_BOUNDS;
+    }
+
+    protected getChildLayoutOptions(child: SChildElement, containerOptions: VBoxLayoutOptionsExt): VBoxLayoutOptionsExt {
+        return super.getChildLayoutOptions(child, containerOptions) as VBoxLayoutOptionsExt;
+    }
+
+    protected getLayoutOptions(element: SModelElement): VBoxLayoutOptionsExt {
+        return super.getLayoutOptions(element) as VBoxLayoutOptionsExt;
+    }
+
+    protected getElementLayoutOptions(element: SModelElement): VBoxLayoutOptionsExt | undefined {
+        return (element as any).layoutOptions;
+    }
+
+    protected getFinalContainerBounds(container: SParentElement & LayoutContainer,
+        lastOffset: Point, options: VBoxLayoutOptionsExt, maxWidth: number, maxHeight: 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)
+        };
+
+        return result;
+    }
+
+    protected getDefaultLayoutOptions(): VBoxLayoutOptionsExt {
+        return {
+            resizeContainer: true,
+            paddingTop: 5,
+            paddingBottom: 5,
+            paddingLeft: 5,
+            paddingRight: 5,
+            paddingFactor: 1,
+            vGap: 1,
+            hAlign: 'center',
+            minWidth: 0,
+            minHeight: 0,
+            hGrab: false,
+            vGrab: false,
+            // eslint-disable-next-line no-null/no-null
+            prefHeight: null,
+            // eslint-disable-next-line no-null/no-null
+            prefWidth: null
+        };
+    }
+
+    protected spread(a: VBoxLayoutOptionsExt, b: VBoxLayoutOptionsExt): VBoxLayoutOptionsExt {
+        return { ...a, ...b };
+    }
+}