@eclipse-glsp/client 1.1.0-next.fe0b297.182 → 2.0.0

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

@@ -0,0 +1,216 @@
+/********************************************************************************
+ * Copyright (c) 2022-2023 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, GModelElement } from '@eclipse-glsp/sprotty';
+import { createCompartment, createGraph, createLabel, createNode, layout, setupLayoutRegistry } from './layouter-test-util.spec';
+
+describe('FreeFormLayouter', () => {
+    const layoutRegistry = setupLayoutRegistry();
+    const log = new ConsoleLogger();
+    const map = new Map<GModelElement, 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 = createGraph();
+            const category = createNode('category', 'vbox', { width: 410.0, height: 215.0 }, undefined, {
+                vGrab: false,
+                hGrab: false,
+                hAlign: 'center',
+                prefWidth: 410.0,
+                prefHeight: 215.0
+            });
+            const headerComp = createCompartment('comp:header', 'hbox');
+            headerComp.children = [createLabel('Category 1')];
+            const childContainer = createCompartment('struct', 'freeform', { hGrab: true, vGrab: true });
+            const labelContainer = createCompartment('struct', 'hbox', { hGrab: true });
+            labelContainer.children = [createLabel('left text', { hGrab: true }), createLabel('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 = createGraph();
+            const category = createNode('category', 'vbox', { width: 500.0, height: 375.0 }, undefined, {
+                vGrab: false,
+                hGrab: false,
+                hAlign: 'center',
+                prefWidth: 500.0,
+                prefHeight: 375.0
+            });
+            const headerComp = createCompartment('comp:header', 'hbox');
+            headerComp.children = [createLabel('Category 2')];
+            const childContainer = createCompartment('struct', 'freeform', { hGrab: true, vGrab: true });
+            const childNode = createNode('task', 'hbox', undefined, { x: 170, y: 190 });
+            childNode.children = [createLabel('Task node', undefined, { x: 5.0, y: 5.0 }, { width: 25.0, height: 20.0 })];
+            childContainer.children = [childNode];
+            const labelContainer = createCompartment('struct', 'hbox', { hGrab: true });
+            labelContainer.children = [createLabel('left text', { hGrab: true }), createLabel('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 = createGraph();
+            const category = createNode('category', 'vbox', { width: 500.0, height: 375.0 }, undefined, {
+                vGrab: false,
+                hGrab: false,
+                hAlign: 'center',
+                prefWidth: 500.0,
+                prefHeight: 375.0
+            });
+            const headerComp = createCompartment('comp:header', 'hbox');
+            headerComp.children = [createLabel('Category 2')];
+            const childContainer = createCompartment('struct', 'freeform', { hGrab: true, vGrab: true });
+            const childNode = createNode('task', 'hbox', undefined, { x: 55, y: 15 });
+            childNode.children = [createLabel('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 = createGraph();
+            const category = createNode('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 = createCompartment('comp:header', 'hbox');
+            headerComp.children = [createLabel('Category 2')];
+            const childContainer = createCompartment('struct', 'freeform', { hGrab: true, vGrab: true });
+            const childNode = createNode(
+                'task',
+                'hbox',
+                undefined,
+                { x: 55, y: 15 },
+                { paddingLeft: 10, paddingRight: 10, paddingTop: 10, paddingBottom: 10 }
+            );
+            childNode.children = [createLabel('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/bounds/freeform-layout.ts

@@ -0,0 +1,132 @@
+/********************************************************************************
+ * Copyright (c) 2021-2023 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 {
+    AbstractLayout,
+    AbstractLayoutOptions,
+    Bounds,
+    BoundsData,
+    Dimension,
+    GChildElement,
+    LayoutContainer,
+    Point,
+    GParentElement,
+    StatefulLayouter
+} from '@eclipse-glsp/sprotty';
+
+/**
+ * Layouts children of a container with explicit X/Y positions
+ */
+@injectable()
+export class FreeFormLayouter extends AbstractLayout<AbstractLayoutOptions> {
+    static KIND = 'freeform';
+
+    override layout(container: GParentElement & LayoutContainer, layouter: StatefulLayouter): void {
+        const boundsData = layouter.getBoundsData(container);
+        const options = this.getLayoutOptions(container);
+        const childrenSize = this.getChildrenSize(container, options, layouter);
+
+        // The real size of the compartment will be determined by the parent node layout;
+        // we only need to compute the bounds required to layout the children.
+
+        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) {
+            const offset = this.layoutChildren(container, layouter, options, maxWidth, maxHeight);
+            boundsData.bounds = this.getFinalContainerBounds(container, offset, options, maxWidth, maxHeight);
+            boundsData.boundsChanged = true;
+        } else {
+            boundsData.bounds = { x: boundsData.bounds!.x, y: boundsData.bounds!.y, width: 0, height: 0 };
+            boundsData.boundsChanged = true;
+        }
+    }
+
+    protected getChildrenSize(
+        container: GParentElement & LayoutContainer,
+        containerOptions: AbstractLayoutOptions,
+        layouter: StatefulLayouter
+    ): Dimension {
+        let maxX = 0;
+        let maxY = 0;
+        container.children.forEach(child => {
+            const bounds = layouter.getBoundsData(child).bounds;
+            if (bounds !== undefined && Dimension.isValid(bounds)) {
+                const childMaxX = bounds.x + bounds.width;
+                const childMaxY = bounds.y + bounds.height;
+                maxX = Math.max(maxX, childMaxX);
+                maxY = Math.max(maxY, childMaxY);
+            }
+        });
+        return {
+            width: maxX,
+            height: maxY
+        };
+    }
+
+    protected layoutChild(
+        child: GChildElement,
+        boundsData: BoundsData,
+        bounds: Bounds,
+        childOptions: AbstractLayoutOptions,
+        containerOptions: AbstractLayoutOptions,
+        currentOffset: Point,
+        maxWidth: number,
+        maxHeight: number
+    ): Point {
+        boundsData.bounds = {
+            x: (child as any).bounds.x,
+            y: (child as any).bounds.y,
+            width: bounds.width,
+            height: bounds.height
+        };
+        boundsData.boundsChanged = true;
+        return currentOffset;
+    }
+
+    protected override getFinalContainerBounds(
+        container: GParentElement & LayoutContainer,
+        lastOffset: Point,
+        options: AbstractLayoutOptions,
+        maxWidth: number,
+        maxHeight: number
+    ): Bounds {
+        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)
+        };
+
+        return result;
+    }
+
+    protected getDefaultLayoutOptions(): AbstractLayoutOptions {
+        return {
+            resizeContainer: true,
+            paddingTop: 0,
+            paddingBottom: 0,
+            paddingLeft: 0,
+            paddingRight: 0,
+            paddingFactor: 1,
+            minWidth: 0,
+            minHeight: 0
+        };
+    }
+
+    protected spread(a: AbstractLayoutOptions, b: AbstractLayoutOptions): AbstractLayoutOptions {
+        return { ...a, ...b };
+    }
+}

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

@@ -0,0 +1,96 @@
+/********************************************************************************
+ * Copyright (c) 2022-2023 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 { inject, injectable, optional } from 'inversify';
+import { VNode } from 'snabbdom';
+import {
+    Action,
+    ComputedBoundsAction,
+    Deferred,
+    EdgeRouterRegistry,
+    ElementAndRoutingPoints,
+    HiddenBoundsUpdater,
+    IActionDispatcher,
+    RequestAction,
+    ResponseAction,
+    GModelElement,
+    GRoutableElement
+} from '@eclipse-glsp/sprotty';
+import { calcElementAndRoute, isRoutable } from '../../utils/gmodel-util';
+
+/**
+ * Grabs the bounds from hidden SVG DOM elements, applies layouts, collects routes and fires {@link ComputedBoundsAction}s.
+ *
+ * The actions will contain the bound, alignment, and routing points of elements.
+ */
+@injectable()
+export class GLSPHiddenBoundsUpdater extends HiddenBoundsUpdater {
+    @inject(EdgeRouterRegistry) @optional() protected readonly edgeRouterRegistry?: EdgeRouterRegistry;
+
+    protected element2route: ElementAndRoutingPoints[] = [];
+    protected edges: GRoutableElement[] = [];
+    protected nodes: VNode[] = [];
+
+    override decorate(vnode: VNode, element: GModelElement): VNode {
+        super.decorate(vnode, element);
+        if (isRoutable(element)) {
+            this.element2route.push(calcElementAndRoute(element, this.edgeRouterRegistry));
+        }
+        return vnode;
+    }
+
+    override postUpdate(cause?: Action): void {
+        const actions = this.captureActions(() => super.postUpdate(cause));
+        actions
+            .filter(action => ComputedBoundsAction.is(action))
+            .forEach(action => this.actionDispatcher.dispatch(this.enhanceAction(action as ComputedBoundsAction)));
+        this.element2route = [];
+    }
+
+    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): ComputedBoundsAction {
+        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.spec.ts

@@ -0,0 +1,170 @@
+/********************************************************************************
+ * Copyright (c) 2022-2023 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 { expect } from 'chai';
+import 'mocha';
+import 'reflect-metadata';
+import { BoundsData, ConsoleLogger, Dimension, GModelElement, GNode } from '@eclipse-glsp/sprotty';
+import { createLabel, createNode, layout, setupLayoutRegistry } from './layouter-test-util.spec';
+
+describe('HBoxLayouter', () => {
+    const layoutRegistry = setupLayoutRegistry();
+    const log = new ConsoleLogger();
+    const map = new Map<GModelElement, BoundsData>();
+
+    function createModel(): GNode {
+        const model = createNode('node', undefined, Dimension.EMPTY);
+        model.children = [
+            createLabel('label1', undefined, undefined, { width: 1, height: 2 }),
+            createLabel('label2', undefined, undefined, { width: 2, height: 1 }),
+            createLabel('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 });
+    });
+});