@hpcc-js/layout 3.5.1 → 3.5.4

package/src/Border2.ts

@@ -1,391 +1,391 @@
-import { BBox, HTMLWidget, Platform, Widget } from "@hpcc-js/common";
-
-import "../src/Border2.css";
-
-export type OverflowT = "hidden" | "scroll" | "visible" | "auto";
-export type ChartPanelSectionT = "top" | "right" | "bottom" | "left" | "center";
-export class WidgetDiv {
-    private _div;
-    private _overlay: boolean = false;
-    private _overflowX: OverflowT = "visible";
-    private _overflowY: OverflowT = "visible";
-    private _widget: Widget;
-
-    constructor(div) {
-        this._div = div;
-    }
-
-    overlay(): boolean;
-    overlay(_: boolean): this;
-    overlay(_?: boolean): boolean | this {
-        if (!arguments.length) return this._overlay;
-        this._overlay = _;
-        return this;
-    }
-
-    overflowX(): OverflowT;
-    overflowX(_: OverflowT): this;
-    overflowX(_?: OverflowT): OverflowT | this {
-        if (!arguments.length) return this._overflowX;
-        this._overflowX = _;
-        this._div.style("overflow-x", _);
-        return this;
-    }
-    overflowY(): OverflowT;
-    overflowY(_: OverflowT): this;
-    overflowY(_?: OverflowT): OverflowT | this {
-        if (!arguments.length) return this._overflowY;
-        this._overflowY = _;
-        this._div.style("overflow-y", _);
-        return this;
-    }
-
-    element() {
-        return this._div;
-    }
-
-    node(): SVGElement | HTMLElement {
-        return this._div.node();
-    }
-
-    widget(): Widget;
-    widget(_: Widget): this;
-    widget(_?: Widget): Widget | this {
-        if (!arguments.length) return this._widget;
-        if (this._widget !== _) {
-            if (this._widget) {
-                this._widget.target(null);
-            }
-            this._widget = _;
-            if (this._widget) {
-                this._widget.target(this._div.node());
-            }
-        }
-        return this;
-    }
-
-    resize(size: { width: number, height: number }) {
-        if (this._widget) {
-            this._div
-                .style("width", `${size.width}px`)
-                .style("height", `${size.height}px`)
-                ;
-            this._widget.resize(size);
-        }
-        return this;
-    }
-
-    async render(getBBox?, availableHeight?: number, availableWidth?: number): Promise<BBox | undefined> {
-        let overflowX = this.overflowX();
-        if(!this.overlay() && overflowX === "visible") {
-            overflowX = null;
-        }
-        let overflowY = this.overflowY();
-        if(!this.overlay() && overflowY === "visible") {
-            overflowY = null;
-        }
-        this._div
-            .style("height", this.overlay() ? "0px" : null)
-            .style("overflow-x", overflowX)
-            .style("overflow-y", overflowY)
-            ;
-        if (this._widget) {
-            return this._widget.renderPromise().then(w => {
-                if (getBBox && this._widget.visible()) {
-                    const retVal = this._widget.getBBox();
-                    retVal.width += 8;
-                    if (availableHeight !== undefined && retVal.height > availableHeight) {
-                        retVal.width += Platform.getScrollbarWidth();
-                    }
-                    if (availableWidth !== undefined && retVal.width > availableWidth) {
-                        retVal.height += Platform.getScrollbarWidth();
-                    }
-                    if (this.overlay()) {
-                        retVal.height = 0;
-                    } else {
-                        retVal.height += 4;
-                    }
-                    return retVal;
-                }
-                return getBBox ? { x: 0, y: 0, width: 0, height: 0 } : undefined;
-            });
-        } else {
-            return Promise.resolve(getBBox ? { x: 0, y: 0, width: 0, height: 0 } : undefined);
-        }
-    }
-}
-
-export class Border2 extends HTMLWidget {
-
-    protected _bodyElement;
-
-    protected _topWA: WidgetDiv;
-    protected _leftWA: WidgetDiv;
-    protected _centerWA: WidgetDiv;
-    protected _rightWA: WidgetDiv;
-    protected _bottomWA: WidgetDiv;
-    protected _topPrevOverflow: OverflowT;
-    protected _leftPrevOverflow: OverflowT;
-    protected _rightPrevOverflow: OverflowT;
-    protected _bottomPrevOverflow: OverflowT;
-
-    constructor() {
-        super();
-        this._tag = "div";
-    }
-
-    enter(domNode, element) {
-        super.enter(domNode, element);
-            
-        const topElement = element.append("header");
-
-        this._bodyElement = element.append("div").attr("class", "body");
-        const centerElement = this._bodyElement.append("div").attr("class", "center");
-        const leftElement = this._bodyElement.append("div").attr("class", "lhs");
-        const rightElement = this._bodyElement.append("div").attr("class", "rhs");
-
-        const bottomElement = element.append("div").attr("class", "footer");
-
-        this._topWA = new WidgetDiv(topElement);
-        this._centerWA = new WidgetDiv(centerElement);
-        this._leftWA = new WidgetDiv(leftElement);
-        this._rightWA = new WidgetDiv(rightElement);
-        this._bottomWA = new WidgetDiv(bottomElement);
-    }
-
-    update(domNode, element) {
-        super.update(domNode, element);
-        this._topWA.element().style("display", this.showTop() ? null : "none");
-        this._rightWA.element().style("display", this.showRight() ? null : "none");
-        this._bottomWA.element().style("display", this.showBottom() ? null : "none");
-        this._leftWA.element().style("display", this.showLeft() ? null : "none");
-        if(this.topOverflowX() !== this._topWA.overflowX()) {
-            this._topWA.overflowX(this.topOverflowX());
-        }
-        if(this.rightOverflowX() !== this._rightWA.overflowX()) {
-            this._rightWA.overflowX(this.rightOverflowX());
-        }
-        if(this.bottomOverflowX() !== this._bottomWA.overflowX()) {
-            this._bottomWA.overflowX(this.bottomOverflowX());
-        }
-        if(this.leftOverflowX() !== this._leftWA.overflowX()) {
-            this._leftWA.overflowX(this.leftOverflowX());
-        }
-        if(this.topOverflowY() !== this._topWA.overflowY()) {
-            this._topWA.overflowY(this.topOverflowY());
-        }
-        if(this.rightOverflowY() !== this._rightWA.overflowY()) {
-            this._rightWA.overflowY(this.rightOverflowY());
-        }
-        if(this.bottomOverflowY() !== this._bottomWA.overflowY()) {
-            this._bottomWA.overflowY(this.bottomOverflowY());
-        }
-        if(this.leftOverflowY() !== this._leftWA.overflowY()) {
-            this._leftWA.overflowY(this.leftOverflowY());
-        }
-        this.element()
-            .style("width", `${this.width()}px`)
-            .style("height", `${this.height()}px`)
-            ;
-    }
-
-    private targetNull(w?: Widget) {
-        if (w) {
-            w.target(null);
-        }
-    }
-
-    exit(domNode, element) {
-        this.targetNull(this.center());
-        this.targetNull(this.bottom());
-        this.targetNull(this.right());
-        this.targetNull(this.left());
-        this.targetNull(this.top());
-        super.exit(domNode, element);
-    }
-
-    swap(sectionA: ChartPanelSectionT, sectionB: ChartPanelSectionT): this {
-        const a = this[sectionA]();
-        const b = this[sectionB]();
-        this.targetNull(a);
-        this.targetNull(b);
-        this[`_${sectionA}WA`].widget(null);
-        this[`_${sectionB}WA`].widget(null);
-        this[sectionA](b);
-        this[sectionB](a);
-        return this;
-    }
-
-    render(callback?: (w: Widget) => void): this {
-        const retVal = super.render(w => {
-            if (this._topWA) {
-                this._topWA
-                    .widget(this.top())
-                    .overlay(this.topOverlay())
-                    .render(true).then(async topBBox => {
-                        const bottomBBox: BBox = await this._bottomWA.widget(this.bottom()).render(true, undefined, this.width()) as BBox;
-                        const availableHeight = this.height() - (topBBox.height + bottomBBox.height);
-                        const leftBBox: BBox = await this._leftWA.widget(this.left()).render(true, availableHeight) as BBox;
-                        const rightBBox: BBox = await this._rightWA.widget(this.right()).render(true, availableHeight) as BBox;
-                        
-                        if (this.bottomHeight_exists()) {
-                            bottomBBox.height = this.bottomHeight();
-                        }
-                        const bodyWidth = this.width() - (leftBBox.width + rightBBox.width);
-                        const bodyHeight = this.height() - (topBBox.height + bottomBBox.height);
-                        
-                        const centerOverflowX = this.centerOverflowX();
-                        const centerOverflowY = this.centerOverflowY();
-
-                        const scrollCenterX = ["auto", "scroll"].indexOf(centerOverflowX) !== -1;
-                        const scrollCenterY = ["auto", "scroll"].indexOf(centerOverflowY) !== -1;
-                        if(scrollCenterX || scrollCenterY) {
-                            this._centerWA
-                                .overflowX(this.centerOverflowX())
-                                .overflowY(this.centerOverflowY())
-                                .widget(this.center())
-                                .resize({
-                                    width: bodyWidth,
-                                    height: bodyHeight
-                                })
-                                .render()
-                                ;
-                        }
-                        this._bodyElement.style("height", `${bodyHeight}px`);
-                        const promises = [
-                            this._topWA
-                                .overflowX(this.topOverflowX())
-                                .overflowY(this.topOverflowY())
-                                .resize({
-                                    width: this.width(),
-                                    height: topBBox.height
-                                })
-                                .render(),
-                            this._leftWA
-                                .overflowX(this.leftOverflowX())
-                                .overflowY(this.leftOverflowY())
-                                .resize({
-                                    width: leftBBox.width,
-                                    height: bodyHeight
-                                })
-                                .render(),
-                            this._rightWA
-                                .overflowX(this.rightOverflowX())
-                                .overflowY(this.rightOverflowY())
-                                .resize({
-                                    width: rightBBox.width,
-                                    height: bodyHeight
-                                })
-                                .render(),
-                            this._centerWA
-                                .overflowX(this.centerOverflowX())
-                                .overflowY(this.centerOverflowY())
-                                .widget(this.center())
-                                .resize({
-                                    width: bodyWidth,
-                                    height: bodyHeight
-                                })
-                                .render(),
-                            this._bottomWA
-                                .overflowX(this.bottomOverflowX())
-                                .overflowY(this.bottomOverflowY())
-                                .resize({
-                                    width: this.width(),
-                                    height: bottomBBox.height
-                                })
-                                .render()
-                        ];
-                        Promise.all(promises).then(promises => {
-                            if (callback) {
-                                callback(this);
-                            }
-                        });
-                    })
-                    ;
-            } else {
-                if (callback) {
-                    callback(this);
-                }
-            }
-        });
-        return retVal;
-    }
-}
-Border2.prototype._class += " layout_Border2";
-
-export interface Border2 {
-    top(): Widget;
-    top(_: Widget): this;
-    topOverlay(): boolean;
-    topOverlay(_: boolean): this;
-    left(): Widget;
-    left(_: Widget): this;
-    center(): Widget;
-    center(_: Widget): this;
-    right(): Widget;
-    right(_: Widget): this;
-    bottom(): Widget;
-    bottom(_: Widget): this;
-    bottomHeight(): number;
-    bottomHeight(_: number): this;
-    bottomHeight_exists(): boolean;
-    topOverflowX(): OverflowT;
-    topOverflowX(_: OverflowT): this;
-    rightOverflowX(): OverflowT;
-    rightOverflowX(_: OverflowT): this;
-    bottomOverflowX(): OverflowT;
-    bottomOverflowX(_: OverflowT): this;
-    leftOverflowX(): OverflowT;
-    leftOverflowX(_: OverflowT): this;
-    centerOverflowX(): OverflowT;
-    centerOverflowX(_: OverflowT): this;
-    topOverflowY(): OverflowT;
-    topOverflowY(_: OverflowT): this;
-    rightOverflowY(): OverflowT;
-    rightOverflowY(_: OverflowT): this;
-    bottomOverflowY(): OverflowT;
-    bottomOverflowY(_: OverflowT): this;
-    leftOverflowY(): OverflowT;
-    leftOverflowY(_: OverflowT): this;
-    centerOverflowY(): OverflowT;
-    centerOverflowY(_: OverflowT): this;
-    showTop(): boolean;
-    showTop(_: boolean): this;
-    showRight(): boolean;
-    showRight(_: boolean): this;
-    showBottom(): boolean;
-    showBottom(_: boolean): this;
-    showLeft(): boolean;
-    showLeft(_: boolean): this;
-    topOverflowX_default(_: OverflowT);
-    rightOverflowX_default(_: OverflowT);
-    bottomOverflowX_default(_: OverflowT);
-    leftOverflowX_default(_: OverflowT);
-    centerOverflowX_default(_: OverflowT);
-    topOverflowY_default(_: OverflowT);
-    rightOverflowY_default(_: OverflowT);
-    bottomOverflowY_default(_: OverflowT);
-    leftOverflowY_default(_: OverflowT);
-    centerOverflowY_default(_: OverflowT);
-}
-Border2.prototype.publish("showTop", true, "boolean", "If true, top widget adapter will display");
-Border2.prototype.publish("showRight", true, "boolean", "If true, right widget adapter will display");
-Border2.prototype.publish("showBottom", true, "boolean", "If true, bottom widget adapter will display");
-Border2.prototype.publish("showLeft", true, "boolean", "If true, left widget adapter will display");
-Border2.prototype.publish("topOverflowX", "visible", "set", "Sets the overflow-x css style for the top widget adapter", ["hidden", "scroll", "visible", "auto"]);
-Border2.prototype.publish("rightOverflowX", "visible", "set", "Sets the overflow-x css style for the right widget adapter", ["hidden", "scroll", "visible", "auto"]);
-Border2.prototype.publish("bottomOverflowX", "visible", "set", "Sets the overflow-x css style for the bottom widget adapter", ["hidden", "scroll", "visible", "auto"]);
-Border2.prototype.publish("leftOverflowX", "visible", "set", "Sets the overflow-x css style for the left widget adapter", ["hidden", "scroll", "visible", "auto"]);
-Border2.prototype.publish("centerOverflowX", "visible", "set", "Sets the overflow-x css style for the center widget adapter", ["hidden", "scroll", "visible", "auto"]);
-Border2.prototype.publish("topOverflowY", "visible", "set", "Sets the overflow-y css style for the top widget adapter", ["hidden", "scroll", "visible", "auto"]);
-Border2.prototype.publish("rightOverflowY", "visible", "set", "Sets the overflow-y css style for the right widget adapter", ["hidden", "scroll", "visible", "auto"]);
-Border2.prototype.publish("bottomOverflowY", "visible", "set", "Sets the overflow-y css style for the bottom widget adapter", ["hidden", "scroll", "visible", "auto"]);
-Border2.prototype.publish("leftOverflowY", "visible", "set", "Sets the overflow-y css style for the left widget adapter", ["hidden", "scroll", "visible", "auto"]);
-Border2.prototype.publish("centerOverflowY", "visible", "set", "Sets the overflow-y css style for the center widget adapter", ["hidden", "scroll", "visible", "auto"]);
-Border2.prototype.publish("top", null, "widget", "Top Widget", undefined, { render: false });
-Border2.prototype.publish("topOverlay", false, "boolean", "Overlay Top Widget");
-Border2.prototype.publish("left", null, "widget", "Left Widget", undefined, { render: false });
-Border2.prototype.publish("center", null, "widget", "Center Widget", undefined, { render: false });
-Border2.prototype.publish("right", null, "widget", "Right Widget", undefined, { render: false });
-Border2.prototype.publish("bottom", null, "widget", "Bottom Widget", undefined, { render: false });
-Border2.prototype.publish("bottomHeight", null, "number", "Bottom Fixed Height", undefined, { optional: true });
+import { BBox, HTMLWidget, Platform, Widget } from "@hpcc-js/common";
+
+import "../src/Border2.css";
+
+export type OverflowT = "hidden" | "scroll" | "visible" | "auto";
+export type ChartPanelSectionT = "top" | "right" | "bottom" | "left" | "center";
+export class WidgetDiv {
+    private _div;
+    private _overlay: boolean = false;
+    private _overflowX: OverflowT = "visible";
+    private _overflowY: OverflowT = "visible";
+    private _widget: Widget;
+
+    constructor(div) {
+        this._div = div;
+    }
+
+    overlay(): boolean;
+    overlay(_: boolean): this;
+    overlay(_?: boolean): boolean | this {
+        if (!arguments.length) return this._overlay;
+        this._overlay = _;
+        return this;
+    }
+
+    overflowX(): OverflowT;
+    overflowX(_: OverflowT): this;
+    overflowX(_?: OverflowT): OverflowT | this {
+        if (!arguments.length) return this._overflowX;
+        this._overflowX = _;
+        this._div.style("overflow-x", _);
+        return this;
+    }
+    overflowY(): OverflowT;
+    overflowY(_: OverflowT): this;
+    overflowY(_?: OverflowT): OverflowT | this {
+        if (!arguments.length) return this._overflowY;
+        this._overflowY = _;
+        this._div.style("overflow-y", _);
+        return this;
+    }
+
+    element() {
+        return this._div;
+    }
+
+    node(): SVGElement | HTMLElement {
+        return this._div.node();
+    }
+
+    widget(): Widget;
+    widget(_: Widget): this;
+    widget(_?: Widget): Widget | this {
+        if (!arguments.length) return this._widget;
+        if (this._widget !== _) {
+            if (this._widget) {
+                this._widget.target(null);
+            }
+            this._widget = _;
+            if (this._widget) {
+                this._widget.target(this._div.node());
+            }
+        }
+        return this;
+    }
+
+    resize(size: { width: number, height: number }) {
+        if (this._widget) {
+            this._div
+                .style("width", `${size.width}px`)
+                .style("height", `${size.height}px`)
+                ;
+            this._widget.resize(size);
+        }
+        return this;
+    }
+
+    async render(getBBox?, availableHeight?: number, availableWidth?: number): Promise<BBox | undefined> {
+        let overflowX = this.overflowX();
+        if(!this.overlay() && overflowX === "visible") {
+            overflowX = null;
+        }
+        let overflowY = this.overflowY();
+        if(!this.overlay() && overflowY === "visible") {
+            overflowY = null;
+        }
+        this._div
+            .style("height", this.overlay() ? "0px" : null)
+            .style("overflow-x", overflowX)
+            .style("overflow-y", overflowY)
+            ;
+        if (this._widget) {
+            return this._widget.renderPromise().then(w => {
+                if (getBBox && this._widget.visible()) {
+                    const retVal = this._widget.getBBox();
+                    retVal.width += 8;
+                    if (availableHeight !== undefined && retVal.height > availableHeight) {
+                        retVal.width += Platform.getScrollbarWidth();
+                    }
+                    if (availableWidth !== undefined && retVal.width > availableWidth) {
+                        retVal.height += Platform.getScrollbarWidth();
+                    }
+                    if (this.overlay()) {
+                        retVal.height = 0;
+                    } else {
+                        retVal.height += 4;
+                    }
+                    return retVal;
+                }
+                return getBBox ? { x: 0, y: 0, width: 0, height: 0 } : undefined;
+            });
+        } else {
+            return Promise.resolve(getBBox ? { x: 0, y: 0, width: 0, height: 0 } : undefined);
+        }
+    }
+}
+
+export class Border2 extends HTMLWidget {
+
+    protected _bodyElement;
+
+    protected _topWA: WidgetDiv;
+    protected _leftWA: WidgetDiv;
+    protected _centerWA: WidgetDiv;
+    protected _rightWA: WidgetDiv;
+    protected _bottomWA: WidgetDiv;
+    protected _topPrevOverflow: OverflowT;
+    protected _leftPrevOverflow: OverflowT;
+    protected _rightPrevOverflow: OverflowT;
+    protected _bottomPrevOverflow: OverflowT;
+
+    constructor() {
+        super();
+        this._tag = "div";
+    }
+
+    enter(domNode, element) {
+        super.enter(domNode, element);
+            
+        const topElement = element.append("header");
+
+        this._bodyElement = element.append("div").attr("class", "body");
+        const centerElement = this._bodyElement.append("div").attr("class", "center");
+        const leftElement = this._bodyElement.append("div").attr("class", "lhs");
+        const rightElement = this._bodyElement.append("div").attr("class", "rhs");
+
+        const bottomElement = element.append("div").attr("class", "footer");
+
+        this._topWA = new WidgetDiv(topElement);
+        this._centerWA = new WidgetDiv(centerElement);
+        this._leftWA = new WidgetDiv(leftElement);
+        this._rightWA = new WidgetDiv(rightElement);
+        this._bottomWA = new WidgetDiv(bottomElement);
+    }
+
+    update(domNode, element) {
+        super.update(domNode, element);
+        this._topWA.element().style("display", this.showTop() ? null : "none");
+        this._rightWA.element().style("display", this.showRight() ? null : "none");
+        this._bottomWA.element().style("display", this.showBottom() ? null : "none");
+        this._leftWA.element().style("display", this.showLeft() ? null : "none");
+        if(this.topOverflowX() !== this._topWA.overflowX()) {
+            this._topWA.overflowX(this.topOverflowX());
+        }
+        if(this.rightOverflowX() !== this._rightWA.overflowX()) {
+            this._rightWA.overflowX(this.rightOverflowX());
+        }
+        if(this.bottomOverflowX() !== this._bottomWA.overflowX()) {
+            this._bottomWA.overflowX(this.bottomOverflowX());
+        }
+        if(this.leftOverflowX() !== this._leftWA.overflowX()) {
+            this._leftWA.overflowX(this.leftOverflowX());
+        }
+        if(this.topOverflowY() !== this._topWA.overflowY()) {
+            this._topWA.overflowY(this.topOverflowY());
+        }
+        if(this.rightOverflowY() !== this._rightWA.overflowY()) {
+            this._rightWA.overflowY(this.rightOverflowY());
+        }
+        if(this.bottomOverflowY() !== this._bottomWA.overflowY()) {
+            this._bottomWA.overflowY(this.bottomOverflowY());
+        }
+        if(this.leftOverflowY() !== this._leftWA.overflowY()) {
+            this._leftWA.overflowY(this.leftOverflowY());
+        }
+        this.element()
+            .style("width", `${this.width()}px`)
+            .style("height", `${this.height()}px`)
+            ;
+    }
+
+    private targetNull(w?: Widget) {
+        if (w) {
+            w.target(null);
+        }
+    }
+
+    exit(domNode, element) {
+        this.targetNull(this.center());
+        this.targetNull(this.bottom());
+        this.targetNull(this.right());
+        this.targetNull(this.left());
+        this.targetNull(this.top());
+        super.exit(domNode, element);
+    }
+
+    swap(sectionA: ChartPanelSectionT, sectionB: ChartPanelSectionT): this {
+        const a = this[sectionA]();
+        const b = this[sectionB]();
+        this.targetNull(a);
+        this.targetNull(b);
+        this[`_${sectionA}WA`].widget(null);
+        this[`_${sectionB}WA`].widget(null);
+        this[sectionA](b);
+        this[sectionB](a);
+        return this;
+    }
+
+    render(callback?: (w: Widget) => void): this {
+        const retVal = super.render(w => {
+            if (this._topWA) {
+                this._topWA
+                    .widget(this.top())
+                    .overlay(this.topOverlay())
+                    .render(true).then(async topBBox => {
+                        const bottomBBox: BBox = await this._bottomWA.widget(this.bottom()).render(true, undefined, this.width()) as BBox;
+                        const availableHeight = this.height() - (topBBox.height + bottomBBox.height);
+                        const leftBBox: BBox = await this._leftWA.widget(this.left()).render(true, availableHeight) as BBox;
+                        const rightBBox: BBox = await this._rightWA.widget(this.right()).render(true, availableHeight) as BBox;
+                        
+                        if (this.bottomHeight_exists()) {
+                            bottomBBox.height = this.bottomHeight();
+                        }
+                        const bodyWidth = this.width() - (leftBBox.width + rightBBox.width);
+                        const bodyHeight = this.height() - (topBBox.height + bottomBBox.height);
+                        
+                        const centerOverflowX = this.centerOverflowX();
+                        const centerOverflowY = this.centerOverflowY();
+
+                        const scrollCenterX = ["auto", "scroll"].indexOf(centerOverflowX) !== -1;
+                        const scrollCenterY = ["auto", "scroll"].indexOf(centerOverflowY) !== -1;
+                        if(scrollCenterX || scrollCenterY) {
+                            this._centerWA
+                                .overflowX(this.centerOverflowX())
+                                .overflowY(this.centerOverflowY())
+                                .widget(this.center())
+                                .resize({
+                                    width: bodyWidth,
+                                    height: bodyHeight
+                                })
+                                .render()
+                                ;
+                        }
+                        this._bodyElement.style("height", `${bodyHeight}px`);
+                        const promises = [
+                            this._topWA
+                                .overflowX(this.topOverflowX())
+                                .overflowY(this.topOverflowY())
+                                .resize({
+                                    width: this.width(),
+                                    height: topBBox.height
+                                })
+                                .render(),
+                            this._leftWA
+                                .overflowX(this.leftOverflowX())
+                                .overflowY(this.leftOverflowY())
+                                .resize({
+                                    width: leftBBox.width,
+                                    height: bodyHeight
+                                })
+                                .render(),
+                            this._rightWA
+                                .overflowX(this.rightOverflowX())
+                                .overflowY(this.rightOverflowY())
+                                .resize({
+                                    width: rightBBox.width,
+                                    height: bodyHeight
+                                })
+                                .render(),
+                            this._centerWA
+                                .overflowX(this.centerOverflowX())
+                                .overflowY(this.centerOverflowY())
+                                .widget(this.center())
+                                .resize({
+                                    width: bodyWidth,
+                                    height: bodyHeight
+                                })
+                                .render(),
+                            this._bottomWA
+                                .overflowX(this.bottomOverflowX())
+                                .overflowY(this.bottomOverflowY())
+                                .resize({
+                                    width: this.width(),
+                                    height: bottomBBox.height
+                                })
+                                .render()
+                        ];
+                        Promise.all(promises).then(promises => {
+                            if (callback) {
+                                callback(this);
+                            }
+                        });
+                    })
+                    ;
+            } else {
+                if (callback) {
+                    callback(this);
+                }
+            }
+        });
+        return retVal;
+    }
+}
+Border2.prototype._class += " layout_Border2";
+
+export interface Border2 {
+    top(): Widget;
+    top(_: Widget): this;
+    topOverlay(): boolean;
+    topOverlay(_: boolean): this;
+    left(): Widget;
+    left(_: Widget): this;
+    center(): Widget;
+    center(_: Widget): this;
+    right(): Widget;
+    right(_: Widget): this;
+    bottom(): Widget;
+    bottom(_: Widget): this;
+    bottomHeight(): number;
+    bottomHeight(_: number): this;
+    bottomHeight_exists(): boolean;
+    topOverflowX(): OverflowT;
+    topOverflowX(_: OverflowT): this;
+    rightOverflowX(): OverflowT;
+    rightOverflowX(_: OverflowT): this;
+    bottomOverflowX(): OverflowT;
+    bottomOverflowX(_: OverflowT): this;
+    leftOverflowX(): OverflowT;
+    leftOverflowX(_: OverflowT): this;
+    centerOverflowX(): OverflowT;
+    centerOverflowX(_: OverflowT): this;
+    topOverflowY(): OverflowT;
+    topOverflowY(_: OverflowT): this;
+    rightOverflowY(): OverflowT;
+    rightOverflowY(_: OverflowT): this;
+    bottomOverflowY(): OverflowT;
+    bottomOverflowY(_: OverflowT): this;
+    leftOverflowY(): OverflowT;
+    leftOverflowY(_: OverflowT): this;
+    centerOverflowY(): OverflowT;
+    centerOverflowY(_: OverflowT): this;
+    showTop(): boolean;
+    showTop(_: boolean): this;
+    showRight(): boolean;
+    showRight(_: boolean): this;
+    showBottom(): boolean;
+    showBottom(_: boolean): this;
+    showLeft(): boolean;
+    showLeft(_: boolean): this;
+    topOverflowX_default(_: OverflowT);
+    rightOverflowX_default(_: OverflowT);
+    bottomOverflowX_default(_: OverflowT);
+    leftOverflowX_default(_: OverflowT);
+    centerOverflowX_default(_: OverflowT);
+    topOverflowY_default(_: OverflowT);
+    rightOverflowY_default(_: OverflowT);
+    bottomOverflowY_default(_: OverflowT);
+    leftOverflowY_default(_: OverflowT);
+    centerOverflowY_default(_: OverflowT);
+}
+Border2.prototype.publish("showTop", true, "boolean", "If true, top widget adapter will display");
+Border2.prototype.publish("showRight", true, "boolean", "If true, right widget adapter will display");
+Border2.prototype.publish("showBottom", true, "boolean", "If true, bottom widget adapter will display");
+Border2.prototype.publish("showLeft", true, "boolean", "If true, left widget adapter will display");
+Border2.prototype.publish("topOverflowX", "visible", "set", "Sets the overflow-x css style for the top widget adapter", ["hidden", "scroll", "visible", "auto"]);
+Border2.prototype.publish("rightOverflowX", "visible", "set", "Sets the overflow-x css style for the right widget adapter", ["hidden", "scroll", "visible", "auto"]);
+Border2.prototype.publish("bottomOverflowX", "visible", "set", "Sets the overflow-x css style for the bottom widget adapter", ["hidden", "scroll", "visible", "auto"]);
+Border2.prototype.publish("leftOverflowX", "visible", "set", "Sets the overflow-x css style for the left widget adapter", ["hidden", "scroll", "visible", "auto"]);
+Border2.prototype.publish("centerOverflowX", "visible", "set", "Sets the overflow-x css style for the center widget adapter", ["hidden", "scroll", "visible", "auto"]);
+Border2.prototype.publish("topOverflowY", "visible", "set", "Sets the overflow-y css style for the top widget adapter", ["hidden", "scroll", "visible", "auto"]);
+Border2.prototype.publish("rightOverflowY", "visible", "set", "Sets the overflow-y css style for the right widget adapter", ["hidden", "scroll", "visible", "auto"]);
+Border2.prototype.publish("bottomOverflowY", "visible", "set", "Sets the overflow-y css style for the bottom widget adapter", ["hidden", "scroll", "visible", "auto"]);
+Border2.prototype.publish("leftOverflowY", "visible", "set", "Sets the overflow-y css style for the left widget adapter", ["hidden", "scroll", "visible", "auto"]);
+Border2.prototype.publish("centerOverflowY", "visible", "set", "Sets the overflow-y css style for the center widget adapter", ["hidden", "scroll", "visible", "auto"]);
+Border2.prototype.publish("top", null, "widget", "Top Widget", undefined, { render: false });
+Border2.prototype.publish("topOverlay", false, "boolean", "Overlay Top Widget");
+Border2.prototype.publish("left", null, "widget", "Left Widget", undefined, { render: false });
+Border2.prototype.publish("center", null, "widget", "Center Widget", undefined, { render: false });
+Border2.prototype.publish("right", null, "widget", "Right Widget", undefined, { render: false });
+Border2.prototype.publish("bottom", null, "widget", "Bottom Widget", undefined, { render: false });
+Border2.prototype.publish("bottomHeight", null, "number", "Bottom Fixed Height", undefined, { optional: true });