@eclipse-glsp/client 0.10.0-next.ca17587.154 → 1.1.0-RC01

package/src/features/layout/tests/freeform-layout.spec.ts

@@ -0,0 +1,216 @@
+/********************************************************************************
+ * Copyright (c) 2022 STMicroelectronics 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 { expect } from 'chai';
+import 'mocha';
+import 'reflect-metadata';
+import { BoundsData, ConsoleLogger, SModelElement } from 'sprotty';
+import { gModel, layout, sComp, setupLayoutRegistry, sLabel, sNode } from './layouter-test-util';
+
+describe('FreeFormLayouter', () => {
+    const layoutRegistry = setupLayoutRegistry();
+    const log = new ConsoleLogger();
+    const map = new Map<SModelElement, BoundsData>();
+
+    describe('issue-610', () => {
+        it('recursive hGrab/vGrab', () => {
+            /**
+             *  _________________________
+             * |       Category 1        |
+             * | _______________________ |
+             * ||                       ||
+             * ||                       ||
+             * ||                       ||
+             * ||                       ||
+             * ||_______________________||
+             * | _______________________ |
+             * ||_left____________right_||
+             * |_________________________|
+             *
+             * This test case checks recursive hGrab/vGrab functionality of nested compartments
+             * See also issue 610 for details and an example model https://github.com/eclipse-glsp/glsp/issues/610.
+             */
+            const model = gModel();
+            const category = sNode('category', 'vbox', { width: 410.0, height: 215.0 }, undefined, {
+                vGrab: false,
+                hGrab: false,
+                hAlign: 'center',
+                prefWidth: 410.0,
+                prefHeight: 215.0
+            });
+            const headerComp = sComp('comp:header', 'hbox');
+            headerComp.children = [sLabel('Category 1')];
+            const childContainer = sComp('struct', 'freeform', { hGrab: true, vGrab: true });
+            const labelContainer = sComp('struct', 'hbox', { hGrab: true });
+            labelContainer.children = [sLabel('left text', { hGrab: true }), sLabel('right text')];
+            category.children = [headerComp, childContainer, labelContainer];
+
+            model.add(category);
+            layout(layoutRegistry, log, map, model);
+            // check category
+            expect(map.get(category)!.bounds).to.deep.equal({ x: 0, y: 0, width: 410.0, height: 215.0 });
+            // check header compartment
+            expect(map.get(category.children[0])!.bounds).to.deep.equal({ x: 0, y: 0, width: -1, height: -1 });
+            // check child freeform compartment
+            expect(map.get(category.children[1])!.bounds).to.deep.equal({ x: 5, y: 5, width: 400.0, height: 205.0 });
+            // check label compartment
+            expect(map.get(category.children[2])!.bounds).to.deep.equal({ x: 0, y: 0, width: -1, height: -1 });
+        });
+    });
+
+    describe('issue-694', () => {
+        it('Structure compartment (hGrab=true, vGrab=true), Left-aligned label (hGrab=true), right-aligned label (hGrab=false)', () => {
+            /**
+             *  _________________________
+             * |       Category 2        |
+             * | _______________________ |
+             * ||                       ||
+             * ||                       ||
+             * ||           Task node   ||
+             * ||                       ||
+             * ||_______________________||
+             * | _______________________ |
+             * ||_left____________right_||
+             * |_________________________|
+             */
+            const model = gModel();
+            const category = sNode('category', 'vbox', { width: 500.0, height: 375.0 }, undefined, {
+                vGrab: false,
+                hGrab: false,
+                hAlign: 'center',
+                prefWidth: 500.0,
+                prefHeight: 375.0
+            });
+            const headerComp = sComp('comp:header', 'hbox');
+            headerComp.children = [sLabel('Category 2')];
+            const childContainer = sComp('struct', 'freeform', { hGrab: true, vGrab: true });
+            const childNode = sNode('task', 'hbox', undefined, { x: 170, y: 190 });
+            childNode.children = [sLabel('Task node', undefined, { x: 5.0, y: 5.0 }, { width: 25.0, height: 20.0 })];
+            childContainer.children = [childNode];
+            const labelContainer = sComp('struct', 'hbox', { hGrab: true });
+            labelContainer.children = [sLabel('left text', { hGrab: true }), sLabel('right text')];
+            category.children = [headerComp, childContainer, labelContainer];
+
+            model.add(category);
+
+            // layout graph
+            layout(layoutRegistry, log, map, model);
+            // check category
+            expect(map.get(category)!.bounds).to.deep.equal({ x: 0, y: 0, width: 500.0, height: 375.0 });
+            // check header compartment
+            expect(map.get(category.children[0])!.bounds).to.deep.equal({ x: 0, y: 0, width: -1, height: -1 });
+            // check child freeform compartment
+            expect(map.get(category.children[1])!.bounds).to.deep.equal({ x: 5.0, y: 5.0, width: 490.0, height: 365.0 });
+            // check child task node
+            expect(map.get(category.children[1].children[0])!.bounds).to.deep.equal({ x: 170.0, y: 190.0, width: 35.0, height: 30.0 });
+            // check label compartment
+            expect(map.get(category.children[2])!.bounds).to.deep.equal({ x: 0, y: 0, width: -1, height: -1 });
+        });
+
+        it('Structure compartment (hGrab=true, vGrab=true)', () => {
+            /**
+             *  _________________________
+             * |       Category 2        |
+             * | _______________________ |
+             * ||                       ||
+             * ||  Task node            ||
+             * ||                       ||
+             * ||                       ||
+             * ||_______________________||
+             * |_________________________|
+             */
+            const model = gModel();
+            const category = sNode('category', 'vbox', { width: 500.0, height: 375.0 }, undefined, {
+                vGrab: false,
+                hGrab: false,
+                hAlign: 'center',
+                prefWidth: 500.0,
+                prefHeight: 375.0
+            });
+            const headerComp = sComp('comp:header', 'hbox');
+            headerComp.children = [sLabel('Category 2')];
+            const childContainer = sComp('struct', 'freeform', { hGrab: true, vGrab: true });
+            const childNode = sNode('task', 'hbox', undefined, { x: 55, y: 15 });
+            childNode.children = [sLabel('Task node', undefined, undefined, { width: 50.0, height: 35.0 })];
+            childContainer.children = [childNode];
+            category.children = [headerComp, childContainer];
+
+            model.add(category);
+
+            // layout graph
+            layout(layoutRegistry, log, map, model);
+            // check category
+            expect(map.get(category)!.bounds).to.deep.equal({ x: 0, y: 0, width: 500.0, height: 375.0 });
+            // check header compartment
+            expect(map.get(category.children[0])!.bounds).to.deep.equal({ x: 0, y: 0, width: -1, height: -1 });
+            // check child freeform compartment
+            expect(map.get(category.children[1])!.bounds).to.deep.equal({ x: 5.0, y: 5.0, width: 490.0, height: 365.0 });
+            // check child task node
+            expect(map.get(category.children[1].children[0])!.bounds).to.deep.equal({ x: 55.0, y: 15.0, width: 60.0, height: 45.0 });
+        });
+
+        it('Structure compartment (hGrab=true, vGrab=true, padding*=10)', () => {
+            /**
+             *  _________________________
+             * |       Category 2        |
+             * | _______________________ |
+             * ||                       ||
+             * ||  Task node            ||
+             * ||                       ||
+             * ||                       ||
+             * ||_______________________||
+             * |_________________________|
+             */
+            const model = gModel();
+            const category = sNode('category', 'vbox', { width: 500.0, height: 375.0 }, undefined, {
+                vGrab: false,
+                hGrab: false,
+                hAlign: 'center',
+                prefWidth: 500.0,
+                prefHeight: 375.0,
+                paddingLeft: 10,
+                paddingRight: 10,
+                paddingTop: 10,
+                paddingBottom: 10
+            });
+            const headerComp = sComp('comp:header', 'hbox');
+            headerComp.children = [sLabel('Category 2')];
+            const childContainer = sComp('struct', 'freeform', { hGrab: true, vGrab: true });
+            const childNode = sNode(
+                'task',
+                'hbox',
+                undefined,
+                { x: 55, y: 15 },
+                { paddingLeft: 10, paddingRight: 10, paddingTop: 10, paddingBottom: 10 }
+            );
+            childNode.children = [sLabel('Task node', undefined, undefined, { width: 50.0, height: 35.0 })];
+            childContainer.children = [childNode];
+            category.children = [headerComp, childContainer];
+
+            model.add(category);
+
+            // layout graph
+            layout(layoutRegistry, log, map, model);
+            // check category
+            expect(map.get(category)!.bounds).to.deep.equal({ x: 0, y: 0, width: 500.0, height: 375.0 });
+            // check header compartment
+            expect(map.get(category.children[0])!.bounds).to.deep.equal({ x: 0, y: 0, width: -1, height: -1 });
+            // check child freeform compartment
+            expect(map.get(category.children[1])!.bounds).to.deep.equal({ x: 10.0, y: 10.0, width: 480.0, height: 355.0 });
+            // check child task node
+            expect(map.get(category.children[1].children[0])!.bounds).to.deep.equal({ x: 55.0, y: 15.0, width: 70.0, height: 55.0 });
+        });
+    });
+});

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

@@ -0,0 +1,171 @@
+/********************************************************************************
+ * Copyright (c) 2022 TypeFox, STMicroelectronics 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
+ ********************************************************************************/
+/* eslint-disable deprecation/deprecation */
+import { Dimension } from '@eclipse-glsp/protocol';
+import { expect } from 'chai';
+import 'mocha';
+import 'reflect-metadata';
+import { BoundsData, ConsoleLogger, SModelElement, SNode } from 'sprotty';
+import { layout, setupLayoutRegistry, sLabel, sNode } from './layouter-test-util';
+
+describe('HBoxLayouter', () => {
+    const layoutRegistry = setupLayoutRegistry();
+    const log = new ConsoleLogger();
+    const map = new Map<SModelElement, BoundsData>();
+
+    function createModel(): SNode {
+        const model = sNode('node', undefined, Dimension.EMPTY);
+        model.children = [
+            sLabel('label1', undefined, undefined, { width: 1, height: 2 }),
+            sLabel('label2', undefined, undefined, { width: 2, height: 1 }),
+            sLabel('label3', undefined, undefined, { width: 3, height: 3 })
+        ];
+        model.layout = 'hbox';
+        return model;
+    }
+
+    it('defaultParams', () => {
+        const model = createModel();
+        layout(layoutRegistry, log, map, model);
+        expect(map.get(model)!.bounds).to.deep.equal({ x: 0, y: 0, width: 18, height: 13 });
+        expect(map.get(model.children[0])!.bounds).to.deep.equal({ x: 5, y: 5.5, width: 1, height: 2 });
+        expect(map.get(model.children[1])!.bounds).to.deep.equal({ x: 7, y: 6, width: 2, height: 1 });
+        expect(map.get(model.children[2])!.bounds).to.deep.equal({ x: 10, y: 5, width: 3, height: 3 });
+    });
+
+    it('alignTop', () => {
+        const model = createModel();
+        model.layoutOptions = {
+            vAlign: 'top'
+        };
+        layout(layoutRegistry, log, map, model);
+        expect(map.get(model)!.bounds).to.deep.equal({ x: 0, y: 0, width: 18, height: 13 });
+        expect(map.get(model.children[0])!.bounds).to.deep.equal({ x: 5, y: 5, width: 1, height: 2 });
+        expect(map.get(model.children[1])!.bounds).to.deep.equal({ x: 7, y: 5, width: 2, height: 1 });
+        expect(map.get(model.children[2])!.bounds).to.deep.equal({ x: 10, y: 5, width: 3, height: 3 });
+    });
+
+    it('alignCenter', () => {
+        const model = createModel();
+        model.layoutOptions = {
+            vAlign: 'center'
+        };
+        layout(layoutRegistry, log, map, model);
+        expect(map.get(model)!.bounds).to.deep.equal({ x: 0, y: 0, width: 18, height: 13 });
+        expect(map.get(model.children[0])!.bounds).to.deep.equal({ x: 5, y: 5.5, width: 1, height: 2 });
+        expect(map.get(model.children[1])!.bounds).to.deep.equal({ x: 7, y: 6, width: 2, height: 1 });
+        expect(map.get(model.children[2])!.bounds).to.deep.equal({ x: 10, y: 5, width: 3, height: 3 });
+    });
+
+    it('alignBottom', () => {
+        const model = createModel();
+        model.layoutOptions = {
+            vAlign: 'bottom'
+        };
+        layout(layoutRegistry, log, map, model);
+        expect(map.get(model)!.bounds).to.deep.equal({ x: 0, y: 0, width: 18, height: 13 });
+        expect(map.get(model.children[0])!.bounds).to.deep.equal({ x: 5, y: 6, width: 1, height: 2 });
+        expect(map.get(model.children[1])!.bounds).to.deep.equal({ x: 7, y: 7, width: 2, height: 1 });
+        expect(map.get(model.children[2])!.bounds).to.deep.equal({ x: 10, y: 5, width: 3, height: 3 });
+    });
+
+    it('padding', () => {
+        const model = createModel();
+        model.layoutOptions = {
+            paddingTop: 7,
+            paddingBottom: 8,
+            paddingLeft: 9,
+            paddingRight: 10
+        };
+        layout(layoutRegistry, log, map, model);
+        expect(map.get(model)!.bounds).to.deep.equal({ x: 0, y: 0, width: 27, height: 18 });
+        expect(map.get(model.children[0])!.bounds).to.deep.equal({ x: 9, y: 7.5, width: 1, height: 2 });
+        expect(map.get(model.children[1])!.bounds).to.deep.equal({ x: 11, y: 8, width: 2, height: 1 });
+        expect(map.get(model.children[2])!.bounds).to.deep.equal({ x: 14, y: 7, width: 3, height: 3 });
+    });
+
+    it('hGap', () => {
+        const model = createModel();
+        model.layoutOptions = {
+            hGap: 4
+        };
+        layout(layoutRegistry, log, map, model);
+        expect(map.get(model)!.bounds).to.deep.equal({ x: 0, y: 0, width: 24, height: 13 });
+        expect(map.get(model.children[0])!.bounds).to.deep.equal({ x: 5, y: 5.5, width: 1, height: 2 });
+        expect(map.get(model.children[1])!.bounds).to.deep.equal({ x: 10, y: 6, width: 2, height: 1 });
+        expect(map.get(model.children[2])!.bounds).to.deep.equal({ x: 16, y: 5, width: 3, height: 3 });
+    });
+
+    it('paddingFactor', () => {
+        const model = createModel();
+        model.layoutOptions = {
+            paddingFactor: 2
+        };
+        layout(layoutRegistry, log, map, model);
+        expect(map.get(model)!.bounds).to.deep.equal({ x: 0, y: 0, width: 18, height: 13 });
+        expect(map.get(model.children[0])!.bounds).to.deep.equal({ x: 9, y: 8.5, width: 1, height: 2 });
+        expect(map.get(model.children[1])!.bounds).to.deep.equal({ x: 11, y: 9, width: 2, height: 1 });
+        expect(map.get(model.children[2])!.bounds).to.deep.equal({ x: 14, y: 8, width: 3, height: 3 });
+    });
+
+    it('minWidth', () => {
+        const model = createModel();
+        model.layoutOptions = {
+            minWidth: 25
+        };
+        layout(layoutRegistry, log, map, model);
+        expect(map.get(model)!.bounds).to.deep.equal({ x: 0, y: 0, width: 25, height: 13 });
+        expect(map.get(model.children[0])!.bounds).to.deep.equal({ x: 5, y: 5.5, width: 1, height: 2 });
+        expect(map.get(model.children[1])!.bounds).to.deep.equal({ x: 7, y: 6, width: 2, height: 1 });
+        expect(map.get(model.children[2])!.bounds).to.deep.equal({ x: 10, y: 5, width: 3, height: 3 });
+    });
+
+    it('minHeight', () => {
+        const model = createModel();
+        model.layoutOptions = {
+            minHeight: 25
+        };
+        layout(layoutRegistry, log, map, model);
+        expect(map.get(model)!.bounds).to.deep.equal({ x: 0, y: 0, width: 18, height: 25 });
+        expect(map.get(model.children[0])!.bounds).to.deep.equal({ x: 5, y: 11.5, width: 1, height: 2 });
+        expect(map.get(model.children[1])!.bounds).to.deep.equal({ x: 7, y: 12, width: 2, height: 1 });
+        expect(map.get(model.children[2])!.bounds).to.deep.equal({ x: 10, y: 11, width: 3, height: 3 });
+    });
+
+    it('prefWidth', () => {
+        const model = createModel();
+        model.layoutOptions = {
+            prefWidth: 20
+        };
+        layout(layoutRegistry, log, map, model);
+        expect(map.get(model)!.bounds).to.deep.equal({ x: 0, y: 0, width: 20, height: 13 });
+        expect(map.get(model.children[0])!.bounds).to.deep.equal({ x: 5, y: 5.5, width: 1, height: 2 });
+        expect(map.get(model.children[1])!.bounds).to.deep.equal({ x: 7, y: 6, width: 2, height: 1 });
+        expect(map.get(model.children[2])!.bounds).to.deep.equal({ x: 10, y: 5, width: 3, height: 3 });
+    });
+
+    it('prefHeight', () => {
+        const model = createModel();
+        model.layoutOptions = {
+            prefHeight: 20
+        };
+        layout(layoutRegistry, log, map, model);
+        expect(map.get(model)!.bounds).to.deep.equal({ x: 0, y: 0, width: 18, height: 20 });
+        expect(map.get(model.children[0])!.bounds).to.deep.equal({ x: 5, y: 9, width: 1, height: 2 });
+        expect(map.get(model.children[1])!.bounds).to.deep.equal({ x: 7, y: 9.5, width: 2, height: 1 });
+        expect(map.get(model.children[2])!.bounds).to.deep.equal({ x: 10, y: 8.5, width: 3, height: 3 });
+    });
+});

package/src/features/layout/tests/layouter-test-util.ts

@@ -0,0 +1,122 @@
+/********************************************************************************
+ * Copyright (c) 2022 STMicroelectronics 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, Point } from '@eclipse-glsp/protocol';
+import 'mocha';
+import 'reflect-metadata';
+import {
+    BoundsData,
+    ConsoleLogger,
+    createFeatureSet,
+    layoutableChildFeature,
+    LayoutRegistry,
+    SCompartment,
+    SLabel,
+    SModelElement,
+    SNode,
+    SParentElement,
+    TYPES
+} from 'sprotty';
+import { createClientContainer } from '../../../base/container-modules';
+import { GLSPGraph } from '../../../lib/model';
+import { StatefulLayouterExt } from '../layouter';
+
+export function gModel(): GLSPGraph {
+    return new GLSPGraph();
+}
+
+export function sNode(
+    type: string,
+    nodeLayout?: string,
+    size?: Dimension,
+    position?: Point,
+    layoutOptions?: { [key: string]: string | number | boolean }
+): SNode {
+    const node = new SNode();
+    node.features = createFeatureSet(SNode.DEFAULT_FEATURES, { enable: [layoutableChildFeature] });
+    node.position = position || {
+        x: 0,
+        y: 0
+    };
+    if (size) {
+        node.size = size;
+    }
+    node.type = type;
+    if (nodeLayout) {
+        node.layout = nodeLayout;
+    }
+    node.layoutOptions = layoutOptions;
+    return node;
+}
+
+export function sComp(type: string, compLayout: string, layoutOptions?: { [key: string]: string | number | boolean }): SCompartment {
+    const comp = new SCompartment();
+    comp.features = createFeatureSet(SCompartment.DEFAULT_FEATURES);
+    comp.type = type;
+    comp.layout = compLayout;
+    comp.layoutOptions = layoutOptions;
+    return comp;
+}
+
+export function sLabel(
+    labelText: string,
+    layoutOptions?: { [key: string]: string | number | boolean },
+    position?: Point,
+    size?: Dimension
+): SLabel {
+    const label = new SLabel();
+    label.features = createFeatureSet(SLabel.DEFAULT_FEATURES);
+    if (position) {
+        label.position = position;
+    }
+    if (size) {
+        label.size = size;
+    }
+    label.layoutOptions = layoutOptions;
+    label.text = labelText;
+    label.type = 'label';
+    return label;
+}
+
+export function addToMap(map: Map<SModelElement, BoundsData>, element: SModelElement): void {
+    map.set(element, {
+        bounds: (element as any).bounds,
+        boundsChanged: true,
+        alignmentChanged: true
+    });
+    if (element instanceof SParentElement) {
+        element.children.forEach(c => addToMap(map, c));
+    }
+}
+
+export function layout(
+    layoutRegistry: LayoutRegistry,
+    log: ConsoleLogger,
+    map: Map<SModelElement, BoundsData>,
+    model: SNode | GLSPGraph
+): void {
+    map.clear();
+    addToMap(map, model);
+    const layouter = new StatefulLayouterExt(map, layoutRegistry, log);
+    layouter.layout();
+}
+
+export function setupLayoutRegistry(): LayoutRegistry {
+    // Generic Test setup
+    // create client container that registers all default modules including the layoutModule
+    const layoutContainer = createClientContainer();
+    return layoutContainer.get<LayoutRegistry>(TYPES.LayoutRegistry);
+}

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

@@ -0,0 +1,171 @@
+/********************************************************************************
+ * Copyright (c) 2022 TypeFox, STMicroelectronics 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
+ ********************************************************************************/
+/* eslint-disable deprecation/deprecation */
+import { Dimension } from '@eclipse-glsp/protocol';
+import { expect } from 'chai';
+import 'mocha';
+import 'reflect-metadata';
+import { BoundsData, ConsoleLogger, SModelElement, SNode } from 'sprotty';
+import { layout, setupLayoutRegistry, sLabel, sNode } from './layouter-test-util';
+
+describe('VBoxLayouter', () => {
+    const layoutRegistry = setupLayoutRegistry();
+    const log = new ConsoleLogger();
+    const map = new Map<SModelElement, BoundsData>();
+
+    function createModel(): SNode {
+        const model = sNode('node', undefined, Dimension.EMPTY);
+        model.children = [
+            sLabel('label1', undefined, undefined, { width: 1, height: 2 }),
+            sLabel('label2', undefined, undefined, { width: 2, height: 1 }),
+            sLabel('label3', undefined, undefined, { width: 3, height: 3 })
+        ];
+        model.layout = 'vbox';
+        return model;
+    }
+
+    it('defaultParams', () => {
+        const model = createModel();
+        layout(layoutRegistry, log, map, model);
+        expect(map.get(model)!.bounds).to.deep.equal({ x: 0, y: 0, width: 13, height: 18 });
+        expect(map.get(model.children[0])!.bounds).to.deep.equal({ x: 6, y: 5, width: 1, height: 2 });
+        expect(map.get(model.children[1])!.bounds).to.deep.equal({ x: 5.5, y: 8, width: 2, height: 1 });
+        expect(map.get(model.children[2])!.bounds).to.deep.equal({ x: 5, y: 10, width: 3, height: 3 });
+    });
+
+    it('alignLeft', () => {
+        const model = createModel();
+        model.layoutOptions = {
+            hAlign: 'left'
+        };
+        layout(layoutRegistry, log, map, model);
+        expect(map.get(model)!.bounds).to.deep.equal({ x: 0, y: 0, width: 13, height: 18 });
+        expect(map.get(model.children[0])!.bounds).to.deep.equal({ x: 5, y: 5, width: 1, height: 2 });
+        expect(map.get(model.children[1])!.bounds).to.deep.equal({ x: 5, y: 8, width: 2, height: 1 });
+        expect(map.get(model.children[2])!.bounds).to.deep.equal({ x: 5, y: 10, width: 3, height: 3 });
+    });
+
+    it('alignCenter', () => {
+        const model = createModel();
+        model.layoutOptions = {
+            hAlign: 'center'
+        };
+        layout(layoutRegistry, log, map, model);
+        expect(map.get(model)!.bounds).to.deep.equal({ x: 0, y: 0, width: 13, height: 18 });
+        expect(map.get(model.children[0])!.bounds).to.deep.equal({ x: 6, y: 5, width: 1, height: 2 });
+        expect(map.get(model.children[1])!.bounds).to.deep.equal({ x: 5.5, y: 8, width: 2, height: 1 });
+        expect(map.get(model.children[2])!.bounds).to.deep.equal({ x: 5, y: 10, width: 3, height: 3 });
+    });
+
+    it('alignRight', () => {
+        const model = createModel();
+        model.layoutOptions = {
+            hAlign: 'right'
+        };
+        layout(layoutRegistry, log, map, model);
+        expect(map.get(model)!.bounds).to.deep.equal({ x: 0, y: 0, width: 13, height: 18 });
+        expect(map.get(model.children[0])!.bounds).to.deep.equal({ x: 7, y: 5, width: 1, height: 2 });
+        expect(map.get(model.children[1])!.bounds).to.deep.equal({ x: 6, y: 8, width: 2, height: 1 });
+        expect(map.get(model.children[2])!.bounds).to.deep.equal({ x: 5, y: 10, width: 3, height: 3 });
+    });
+
+    it('padding', () => {
+        const model = createModel();
+        model.layoutOptions = {
+            paddingTop: 7,
+            paddingBottom: 8,
+            paddingLeft: 9,
+            paddingRight: 10
+        };
+        layout(layoutRegistry, log, map, model);
+        expect(map.get(model)!.bounds).to.deep.equal({ x: 0, y: 0, width: 22, height: 23 });
+        expect(map.get(model.children[0])!.bounds).to.deep.equal({ x: 10, y: 7, width: 1, height: 2 });
+        expect(map.get(model.children[1])!.bounds).to.deep.equal({ x: 9.5, y: 10, width: 2, height: 1 });
+        expect(map.get(model.children[2])!.bounds).to.deep.equal({ x: 9, y: 12, width: 3, height: 3 });
+    });
+
+    it('vGap', () => {
+        const model = createModel();
+        model.layoutOptions = {
+            vGap: 4
+        };
+        layout(layoutRegistry, log, map, model);
+        expect(map.get(model)!.bounds).to.deep.equal({ x: 0, y: 0, width: 13, height: 24 });
+        expect(map.get(model.children[0])!.bounds).to.deep.equal({ x: 6, y: 5, width: 1, height: 2 });
+        expect(map.get(model.children[1])!.bounds).to.deep.equal({ x: 5.5, y: 11, width: 2, height: 1 });
+        expect(map.get(model.children[2])!.bounds).to.deep.equal({ x: 5, y: 16, width: 3, height: 3 });
+    });
+
+    it('paddingFactor', () => {
+        const model = createModel();
+        model.layoutOptions = {
+            paddingFactor: 2
+        };
+        layout(layoutRegistry, log, map, model);
+        expect(map.get(model)!.bounds).to.deep.equal({ x: 0, y: 0, width: 13, height: 18 });
+        expect(map.get(model.children[0])!.bounds).to.deep.equal({ x: 9, y: 9, width: 1, height: 2 });
+        expect(map.get(model.children[1])!.bounds).to.deep.equal({ x: 8.5, y: 12, width: 2, height: 1 });
+        expect(map.get(model.children[2])!.bounds).to.deep.equal({ x: 8, y: 14, width: 3, height: 3 });
+    });
+
+    it('minWidth', () => {
+        const model = createModel();
+        model.layoutOptions = {
+            minWidth: 25
+        };
+        layout(layoutRegistry, log, map, model);
+        expect(map.get(model)!.bounds).to.deep.equal({ x: 0, y: 0, width: 25, height: 18 });
+        expect(map.get(model.children[0])!.bounds).to.deep.equal({ x: 12, y: 5, width: 1, height: 2 });
+        expect(map.get(model.children[1])!.bounds).to.deep.equal({ x: 11.5, y: 8, width: 2, height: 1 });
+        expect(map.get(model.children[2])!.bounds).to.deep.equal({ x: 11, y: 10, width: 3, height: 3 });
+    });
+
+    it('minHeight', () => {
+        const model = createModel();
+        model.layoutOptions = {
+            minHeight: 25
+        };
+        layout(layoutRegistry, log, map, model);
+        expect(map.get(model)!.bounds).to.deep.equal({ x: 0, y: 0, width: 13, height: 25 });
+        expect(map.get(model.children[0])!.bounds).to.deep.equal({ x: 6, y: 5, width: 1, height: 2 });
+        expect(map.get(model.children[1])!.bounds).to.deep.equal({ x: 5.5, y: 8, width: 2, height: 1 });
+        expect(map.get(model.children[2])!.bounds).to.deep.equal({ x: 5, y: 10, width: 3, height: 3 });
+    });
+
+    it('prefWidth', () => {
+        const model = createModel();
+        model.layoutOptions = {
+            prefWidth: 20
+        };
+        layout(layoutRegistry, log, map, model);
+        expect(map.get(model)!.bounds).to.deep.equal({ x: 0, y: 0, width: 20, height: 18 });
+        expect(map.get(model.children[0])!.bounds).to.deep.equal({ x: 9.5, y: 5, width: 1, height: 2 });
+        expect(map.get(model.children[1])!.bounds).to.deep.equal({ x: 9, y: 8, width: 2, height: 1 });
+        expect(map.get(model.children[2])!.bounds).to.deep.equal({ x: 8.5, y: 10, width: 3, height: 3 });
+    });
+
+    it('prefHeight', () => {
+        const model = createModel();
+        model.layoutOptions = {
+            prefHeight: 20
+        };
+        layout(layoutRegistry, log, map, model);
+        expect(map.get(model)!.bounds).to.deep.equal({ x: 0, y: 0, width: 13, height: 20 });
+        expect(map.get(model.children[0])!.bounds).to.deep.equal({ x: 6, y: 5, width: 1, height: 2 });
+        expect(map.get(model.children[1])!.bounds).to.deep.equal({ x: 5.5, y: 8, width: 2, height: 1 });
+        expect(map.get(model.children[2])!.bounds).to.deep.equal({ x: 5, y: 10, width: 3, height: 3 });
+    });
+});