@hpcc-js/layout 3.5.7 → 3.5.10

package/src/Border.ts

@@ -1,636 +1,636 @@
-import { d3Event, HTMLWidget, Platform, select as d3Select, selectAll as d3SelectAll, Utility } from "@hpcc-js/common";
-import { drag as d3Drag } from "d3-drag";
-import { Cell } from "./Cell.ts";
-
-import "../src/Border.css";
-
-export class Border extends HTMLWidget {
-    _colCount: number;
-    _rowCount: number;
-    _colSize: number;
-    _rowSize: number;
-    _shrinkWrapBoxes;
-    _watch;
-    _offsetX;
-    _offsetY;
-    _dragCell;
-    _dragCellSize;
-    _dragCellStartSize;
-    _handleTop;
-    _handleLeft;
-    _dragPrevX;
-    _dragPrevY;
-    _cellSizes;
-    contentDiv;
-    _scrollBarWidth;
-    _borderHandles;
-    _sectionTypeArr;
-
-    constructor() {
-        super();
-
-        this._tag = "div";
-
-        this._colCount = 0;
-        this._rowCount = 0;
-        this._colSize = 0;
-        this._rowSize = 0;
-
-        this._shrinkWrapBoxes = {};
-
-        this.content([]);
-        this.sectionTypes([]);
-    }
-
-    watchWidget(widget) {
-        if (this._watch === undefined) {
-            this._watch = {};
-        }
-        if (this._watch[widget.id()]) {
-            this._watch[widget.id()].remove();
-            delete this._watch[widget.id()];
-        }
-        if (widget) {
-            const context = this;
-            this._watch[widget.id()] = widget.monitor(function (paramId, newVal, oldVal) {
-                if (oldVal !== newVal) {
-                    context.lazyPostUpdate();
-                }
-            });
-        }
-    }
-
-    lazyPostUpdate = Utility.debounce(function () {
-        this.postUpdate();
-    }, 100);
-
-    applyLayoutType() {
-        const layoutObj = this.borderLayoutObject();
-        this.content().forEach(function (cell, i) {
-            cell._fixedLeft = layoutObj[this.sectionTypes()[i]].left;
-            cell._fixedTop = layoutObj[this.sectionTypes()[i]].top;
-            cell._fixedWidth = layoutObj[this.sectionTypes()[i]].width;
-            cell._fixedHeight = layoutObj[this.sectionTypes()[i]].height;
-            cell._dragHandles = this.cellSpecificDragHandles(this.sectionTypes()[i]);
-        }, this);
-    }
-    cellSpecificDragHandles(sectionType) {
-        switch (sectionType) {
-            case "top": return ["s"];
-            case "right": return ["w"];
-            case "bottom": return ["n"];
-            case "left": return ["e"];
-            case "center": return [];
-        }
-    }
-
-    borderLayoutObject(layoutType?) {
-        const retObj = {};
-        const context = this;
-        let topSize;
-        let topPerc;
-        let bottomSize;
-        let bottomPerc;
-        let leftSize;
-        let leftPerc;
-        let rightSize;
-        let rightPerc;
-
-        const bcRect = this.target().getBoundingClientRect();
-        const gridRect: any = {};
-        gridRect.top = bcRect.top;
-        gridRect.left = bcRect.left;
-        gridRect.bottom = bcRect.bottom;
-        gridRect.right = bcRect.right;
-        if (this.target() instanceof SVGElement) {
-            gridRect.width = parseFloat(this.target().getAttribute("width"));
-            gridRect.height = parseFloat(this.target().getAttribute("height"));
-        } else {
-            gridRect.width = bcRect.width;
-            gridRect.height = bcRect.height;
-        }
-        if (this.sectionTypes().indexOf("top") !== -1) {
-            topSize = this.topSize();
-            topPerc = this.topPercentage();
-            if (typeof (this._shrinkWrapBoxes["top"]) !== "undefined") {
-                topSize = this._shrinkWrapBoxes["top"].height + this.gutter();
-                topPerc = 0;
-            }
-        }
-        if (this.sectionTypes().indexOf("bottom") !== -1) {
-            bottomSize = this.bottomSize();
-            bottomPerc = this.bottomPercentage();
-            if (typeof (this._shrinkWrapBoxes["bottom"]) !== "undefined") {
-                bottomSize = this._shrinkWrapBoxes["bottom"].height + this.gutter();
-                bottomPerc = 0;
-            }
-        }
-        if (this.sectionTypes().indexOf("left") !== -1) {
-            leftSize = this.leftSize();
-            leftPerc = this.leftPercentage();
-            if (typeof (this._shrinkWrapBoxes["left"]) !== "undefined") {
-                leftSize = this._shrinkWrapBoxes["left"].width + this.gutter();
-                leftPerc = 0;
-            }
-        }
-        if (this.sectionTypes().indexOf("right") !== -1) {
-            rightSize = this.rightSize();
-            rightPerc = this.rightPercentage();
-            if (typeof (this._shrinkWrapBoxes["right"]) !== "undefined") {
-                rightSize = this._shrinkWrapBoxes["right"].width + this.gutter();
-                rightPerc = 0;
-            }
-        }
-
-        const t = _sectionPlacementObject({
-            width: { "px": 0, "%": 100 },
-            height: { "px": topSize, "%": topPerc },
-            top: { "px": 0, "%": 0 },
-            left: { "px": 0, "%": 0 }
-        });
-        const b = _sectionPlacementObject({
-            width: { "px": 0, "%": 100 },
-            height: { "px": bottomSize, "%": bottomPerc },
-            top: { "px": 0, "%": 100 },
-            left: { "px": 0, "%": 0 }
-        });
-        b.top -= b.height;
-        const l = _sectionPlacementObject({
-            width: { "px": leftSize, "%": leftPerc },
-            height: { "px": -t.height - b.height, "%": 100 },
-            top: { "px": t.height, "%": 0 },
-            left: { "px": 0, "%": 0 }
-        });
-        const r = _sectionPlacementObject({
-            width: { "px": rightSize, "%": rightPerc },
-            height: { "px": -t.height - b.height, "%": 100 },
-            top: { "px": t.height, "%": 0 },
-            left: { "px": 0, "%": 100 }
-        });
-        r.left -= r.width;
-        const c = _sectionPlacementObject({
-            width: { "px": -r.width - l.width, "%": 100 },
-            height: { "px": -t.height - b.height, "%": 100 },
-            top: { "px": t.height, "%": 0 },
-            left: { "px": l.width, "%": 0 }
-        });
-        retObj["top"] = t;
-        retObj["bottom"] = b;
-        retObj["right"] = r;
-        retObj["left"] = l;
-        retObj["center"] = c;
-        return retObj;
-
-        function _sectionPlacementObject(obj) {
-            obj.width["px"] = typeof (obj.width["px"]) !== "undefined" ? obj.width["px"] : 0;
-            obj.width["%"] = typeof (obj.width["%"]) !== "undefined" ? obj.width["%"] : 0;
-            obj.height["px"] = typeof (obj.height["px"]) !== "undefined" ? obj.height["px"] : 0;
-            obj.height["%"] = typeof (obj.height["%"]) !== "undefined" ? obj.height["%"] : 0;
-            const ret = {
-                width: obj.width["px"] + (obj.width["%"] / 100 * context.width()),
-                height: obj.height["px"] + (obj.height["%"] / 100 * context.height()),
-                top: obj.top["px"] + (obj.top["%"] / 100 * context.height()) + context.gutter() / 2,
-                left: obj.left["px"] + (obj.left["%"] / 100 * context.width()) + context.gutter() / 2
-            };
-            return ret;
-        }
-    }
-
-    clearContent(sectionType) {
-        if (!sectionType) {
-            this.content().forEach(function (contentWidget) {
-                contentWidget.target(null);
-                return false;
-            });
-            d3Select("#" + this.id() + " > div.borderHandle")
-                .classed("borderHandleDisabled", true)
-                ;
-            delete this._watch;
-            this.content([]);
-            this.sectionTypes([]);
-        } else {
-            const idx = this.sectionTypes().indexOf(sectionType);
-            if (idx >= 0) {
-                if (this._watch && this.content()[idx]) {
-                    delete this._watch[this.content()[idx].id()];
-                }
-                this.content()[idx].target(null);
-                d3Select("#" + this.id() + " > div.borderHandle_" + sectionType)
-                    .classed("borderHandleDisabled", true)
-                    ;
-                this.content().splice(idx, 1);
-                this.sectionTypes().splice(idx, 1);
-            }
-        }
-    }
-
-    hasContent(sectionType, widget, title) {
-        return this.sectionTypes().indexOf(sectionType) >= 0;
-    }
-
-    setContent(sectionType, widget, title?) {
-        this.clearContent(sectionType);
-        title = typeof (title) !== "undefined" ? title : "";
-        if (widget) {
-            const cell = new Cell()
-                .surfaceBorderWidth(0)
-                .widget(widget)
-                .title(title)
-                ;
-            this.watchWidget(widget);
-            this.content().push(cell);
-            this.sectionTypes().push(sectionType);
-        }
-        return this;
-    }
-
-    getCell(id) {
-        const idx = this.sectionTypes().indexOf(id);
-        if (idx >= 0) {
-            return this.content()[idx];
-        }
-        return null;
-    }
-
-    getContent(id) {
-        const idx = this.sectionTypes().indexOf(id);
-        if (idx >= 0) {
-            return this.content()[idx].widget();
-        }
-        return null;
-    }
-
-    setLayoutOffsets() {
-        this._offsetX = this._element.node().getBoundingClientRect().left + (this.gutter() / 2);
-        this._offsetY = this._element.node().getBoundingClientRect().top + (this.gutter() / 2);
-    }
-
-    dragStart(handle) {
-        const event = d3Event();
-        event.sourceEvent.stopPropagation();
-        const context = this;
-
-        this._dragCell = handle;
-        this._dragCellStartSize = this[handle + "Size"]();
-
-        if (this[handle + "ShrinkWrap"]()) {
-            this[handle + "Percentage"](0);
-            this[handle + "ShrinkWrap"](false);
-        }
-
-        const handleElm = d3Select("#" + context.id() + " > div.borderHandle_" + handle);
-        context._handleTop = parseFloat(handleElm.style("top").split("px")[0]);
-        context._handleLeft = parseFloat(handleElm.style("left").split("px")[0]);
-
-        this._dragPrevX = event.sourceEvent.clientX;
-        this._dragPrevY = event.sourceEvent.clientY;
-    }
-    dragTick(handle) {
-        const context = this;
-
-        const event = d3Event();
-        const xDelta = this._dragPrevX - event.sourceEvent.clientX;
-        const yDelta = this._dragPrevY - event.sourceEvent.clientY;
-
-        switch (handle) {
-            case "top":
-            case "bottom":
-                _moveHandles(handle, yDelta);
-                break;
-            case "right":
-            case "left":
-                _moveHandles(handle, xDelta);
-                break;
-        }
-
-        function _moveHandles(handle2, delta) {
-            if (delta === 0) return;
-            const handles = d3SelectAll("#" + context.id() + " > div.borderHandle");
-            const grabbedHandle = d3Select("#" + context.id() + " > div.borderHandle_" + handle2);
-
-            if (grabbedHandle.classed("borderHandle_top")) {
-                grabbedHandle.style("top", (context._handleTop - delta) + "px");
-                context._cellSizes.topHeight = context._handleTop - delta;
-                context._cellSizes.leftHeight = context._cellSizes.height;
-                context._cellSizes.leftHeight -= context._cellSizes.topHeight;
-                context._cellSizes.leftHeight -= context._cellSizes.bottomHeight;
-                context._cellSizes.rightHeight = context._cellSizes.leftHeight;
-            } else if (grabbedHandle.classed("borderHandle_right")) {
-                grabbedHandle.style("left", (context._handleLeft - delta) + "px");
-                context._cellSizes.rightWidth = context._cellSizes.width - context._handleLeft + delta;
-            } else if (grabbedHandle.classed("borderHandle_bottom")) {
-                grabbedHandle.style("top", (context._handleTop - delta) + "px");
-                context._cellSizes.bottomHeight = context._cellSizes.height - context._handleTop + delta;
-                context._cellSizes.leftHeight = context._cellSizes.height;
-                context._cellSizes.leftHeight -= context._cellSizes.bottomHeight;
-                context._cellSizes.leftHeight -= context._cellSizes.topHeight;
-                context._cellSizes.rightHeight = context._cellSizes.leftHeight;
-            } else if (grabbedHandle.classed("borderHandle_left")) {
-                grabbedHandle.style("left", (context._handleLeft - delta) + "px");
-                context._cellSizes.leftWidth = context._handleLeft - delta;
-            }
-
-            handles.each(function () {
-                const handle3 = d3Select(this);
-                if (handle3.classed("borderHandle_top")) {
-                    handle3.style("width", context._cellSizes.width + "px");
-                    handle3.style("top", (context._cellSizes.topHeight - 3) + "px");
-                } else if (handle3.classed("borderHandle_right")) {
-                    handle3.style("left", (context._cellSizes.width - context._cellSizes.rightWidth) + "px");
-                    handle3.style("top", (context._cellSizes.topHeight + 3) + "px");
-                    handle3.style("height", context._cellSizes.rightHeight + "px");
-                } else if (handle3.classed("borderHandle_bottom")) {
-                    handle3.style("width", context._cellSizes.width + "px");
-                    handle3.style("top", (context._cellSizes.height - context._cellSizes.bottomHeight - 3) + "px");
-                } else if (handle3.classed("borderHandle_left")) {
-                    handle3.style("left", context._cellSizes.leftWidth + "px");
-                    handle3.style("height", context._cellSizes.leftHeight + "px");
-                    handle3.style("top", (context._cellSizes.topHeight + 3) + "px");
-                }
-            });
-        }
-    }
-    dragEnd(handle) {
-        if (handle) {
-            const event = d3Event();
-            const xDelta = this._dragPrevX - event.sourceEvent.clientX;
-            const yDelta = this._dragPrevY - event.sourceEvent.clientY;
-
-            switch (handle) {
-                case "top":
-                    if (yDelta !== 0) {
-                        this.topPercentage(0);
-                        this.topSize(this.topSize() === 0 ? this.getContent("top").getBBox().height - yDelta : this.topSize() - yDelta);
-                    }
-                    break;
-                case "right":
-                    if (xDelta !== 0) {
-                        this.rightPercentage(0);
-                        this.rightSize(this.rightSize() === 0 ? this.getContent("right").getBBox().width + xDelta : this.rightSize() + xDelta);
-                    }
-                    break;
-                case "bottom":
-                    if (yDelta !== 0) {
-                        this.bottomPercentage(0);
-                        this.bottomSize(this.bottomSize() === 0 ? this.getContent("bottom").getBBox().height + yDelta : this.bottomSize() + yDelta);
-                    }
-                    break;
-                case "left":
-                    if (xDelta !== 0) {
-                        this.leftPercentage(0);
-                        this.leftSize(this.leftSize() === 0 ? this.getContent("left").getBBox().width - xDelta : this.leftSize() - xDelta);
-                    }
-                    break;
-            }
-
-            this._dragPrevX = event.sourceEvent.clientX;
-            this._dragPrevY = event.sourceEvent.clientY;
-        }
-        this.render();
-    }
-
-    size(_?) {
-        const retVal = HTMLWidget.prototype.size.apply(this, arguments);
-        if (arguments.length && this.contentDiv) {
-            this.contentDiv
-                .style("width", this._size.width + "px")
-                .style("height", this._size.height + "px")
-                ;
-        }
-        return retVal;
-    }
-
-    enter(domNode, element) {
-        super.enter(domNode, element);
-        const context = this;
-        element.style("position", "relative");
-        this.contentDiv = element.append("div").classed("border-content", true);
-        this._scrollBarWidth = Platform.getScrollbarWidth();
-        this._borderHandles = ["top", "left", "right", "bottom"];
-
-        const handles = element.selectAll("div.borderHandle").data(this._borderHandles);
-        handles.enter().append("div")
-            .classed("borderHandle", true)
-            .each(function (handle) {
-                const h = d3Select(this);
-                h.classed("borderHandle_" + handle, true)
-                    .classed("borderHandleDisabled", context.getContent(handle) === null)
-                    ;
-            });
-    }
-
-    update(domNode, element) {
-        super.update(domNode, element);
-        this._sectionTypeArr = this.sectionTypes();
-        const context = this;
-
-        element.classed("design-mode", this.designMode());
-
-        this.setLayoutOffsets();
-
-        const rows = this.contentDiv.selectAll(".cell_" + this._id).data(this.content(), function (d) { return d._id; });
-        const rowsUpdate = rows.enter().append("div")
-            .classed("cell_" + this._id, true)
-            .style("position", "absolute")
-            .each(function (d, i) {
-                d3Select(this).classed("border-cell border-cell-" + context._sectionTypeArr[i], true);
-                d.target(this);
-                d3Select("#" + context.id() + " > div.borderHandle_" + context._sectionTypeArr[i])
-                    .classed("borderHandleDisabled", false);
-            }).merge(rows);
-        rowsUpdate
-            .each(function (d, idx) {
-                const sectionType = context.sectionTypes()[idx];
-                if (typeof (context[sectionType + "ShrinkWrap"]) !== "undefined" && context[sectionType + "ShrinkWrap"]()) {
-                    d.render();
-                    context._shrinkWrapBoxes[sectionType] = d.widget().getBBox(true);
-                } else {
-                    delete context._shrinkWrapBoxes[sectionType];
-                }
-            });
-
-        const drag = d3Drag()
-            .on("start", function (d, i) { context.dragStart.call(context, d, i); })
-            .on("drag", function (d, i) { context.dragTick.call(context, d, i); })
-            .on("end", function (d, i) { context.dragEnd.call(context, d, i); })
-            ;
-        if (this.designMode()) {
-            element.selectAll("#" + this.id() + " > div.borderHandle").call(drag);
-        } else {
-            element.selectAll("#" + this.id() + " > div.borderHandle").on(".drag", null);
-        }
-
-        const layoutObj = this.borderLayoutObject();
-        this.content().forEach(function (cell, i) {
-            cell._fixedLeft = layoutObj[this.sectionTypes()[i]].left;
-            cell._fixedTop = layoutObj[this.sectionTypes()[i]].top;
-            cell._fixedWidth = layoutObj[this.sectionTypes()[i]].width;
-            cell._fixedHeight = layoutObj[this.sectionTypes()[i]].height;
-            cell._dragHandles = [];
-        }, this);
-
-        rowsUpdate
-            .style("left", function (d) { return d._fixedLeft + "px"; })
-            .style("top", function (d) { return d._fixedTop + "px"; })
-            .style("width", function (d) { return d._fixedWidth - context.gutter() + "px"; })
-            .style("height", function (d) { return d._fixedHeight - context.gutter() + "px"; })
-            .each(function (d) {
-                d._placeholderElement
-                    .attr("draggable", context.designMode())
-                    .selectAll(".dragHandle")
-                    .attr("draggable", context.designMode())
-                    ;
-                d
-                    .surfacePadding(context.surfacePadding())
-                    .resize()
-                    ;
-            });
-        rows.exit().each(function (d) {
-            d.target(null);
-        }).remove();
-
-        this.getCellSizes();
-
-        element
-            .selectAll("#" + this.id() + " > div.borderHandle")
-            .each(function () {
-                const handle = d3Select(this);
-                if (handle.classed("borderHandle_top")) {
-                    handle.style("width", context._cellSizes.width + "px");
-                    handle.style("top", (context._cellSizes.topHeight - 3) + "px");
-                } else if (handle.classed("borderHandle_right")) {
-                    handle.style("left", (context._cellSizes.width - context._cellSizes.rightWidth) + "px");
-                    handle.style("top", (context._cellSizes.topHeight + 3) + "px");
-                    handle.style("height", context._cellSizes.rightHeight + "px");
-                } else if (handle.classed("borderHandle_bottom")) {
-                    handle.style("width", context._cellSizes.width + "px");
-                    handle.style("top", (context._cellSizes.height - context._cellSizes.bottomHeight - 3) + "px");
-                } else if (handle.classed("borderHandle_left")) {
-                    handle.style("left", context._cellSizes.leftWidth + "px");
-                    handle.style("height", context._cellSizes.leftHeight + "px");
-                    handle.style("top", (context._cellSizes.topHeight + 3) + "px");
-                }
-
-            })
-            ;
-    }
-
-    getCellSizes() {
-        const context = this;
-        context._cellSizes = {};
-        const contentRect = this.element().node().getBoundingClientRect();
-        context._cellSizes.width = contentRect.width;
-        context._cellSizes.height = contentRect.height;
-        this.element()
-            .selectAll("#" + this.id() + " > div > div.border-cell")
-            .each(function () {
-                const cell = d3Select(this);
-                if (typeof cell.node === "function") {
-                    const rect = cell.node().getBoundingClientRect();
-                    if (cell.classed("border-cell-top")) {
-                        context._cellSizes.topHeight = rect.height;
-                    } else if (cell.classed("border-cell-left")) {
-                        context._cellSizes.leftWidth = rect.width;
-                        context._cellSizes.leftHeight = rect.height;
-                    } else if (cell.classed("border-cell-right")) {
-                        context._cellSizes.rightWidth = rect.width;
-                        context._cellSizes.rightHeight = rect.height;
-                    } else if (cell.classed("border-cell-bottom")) {
-                        context._cellSizes.bottomHeight = rect.height;
-                    }
-                }
-            });
-        const sizes = ["height", "width", "topHeight", "bottomHeight", "leftHeight", "rightHeight", "leftWidth", "rightWidth"];
-        sizes.forEach(function (size) {
-            context._cellSizes[size] = context._cellSizes[size] === undefined ? 0 : context._cellSizes[size];
-        });
-    }
-
-    postUpdate(domNode, element) {
-        const context = this;
-        this.content().forEach(function (n) {
-            if (n._element.node() !== null && n.widget()) {
-                const prevBox = n.widget().getBBox(false, true);
-                const currBox = n.widget().getBBox(true, true);
-                if (prevBox.width !== currBox.width || prevBox.height !== currBox.height) {
-                    context.lazyRender();
-                }
-            }
-        });
-    }
-
-    exit(domNode, element) {
-        this.content().forEach(w => w.target(null));
-        super.exit(domNode, element);
-    }
-}
-Border.prototype._class += " layout_Border";
-
-export interface Border {
-    designMode(): boolean;
-    designMode(_: boolean): this;
-
-    content(): any[];
-    content(_: any[]): this;
-
-    gutter(): number;
-    gutter(_: number): this;
-
-    topShrinkWrap(): boolean;
-    topShrinkWrap(_: boolean): this;
-    leftShrinkWrap(): boolean;
-    leftShrinkWrap(_: boolean): this;
-    rightShrinkWrap(): boolean;
-    rightShrinkWrap(_: boolean): this;
-    bottomShrinkWrap(): boolean;
-    bottomShrinkWrap(_: boolean): this;
-
-    topSize(): number;
-    topSize(_: number): this;
-    leftSize(): number;
-    leftSize(_: number): this;
-    rightSize(): number;
-    rightSize(_: number): this;
-    bottomSize(): number;
-    bottomSize(_: number): this;
-
-    topPercentage(): number;
-    topPercentage(_: number): this;
-    leftPercentage(): number;
-    leftPercentage(_: number): this;
-    rightPercentage(): number;
-    rightPercentage(_: number): this;
-    bottomPercentage(): number;
-    bottomPercentage(_: number): this;
-
-    surfacePadding(): number;
-    surfacePadding(_: number): this;
-
-    sectionTypes(): any[];
-    sectionTypes(_: any[]): this;
-}
-
-Border.prototype.publish("designMode", false, "boolean", "Design Mode", null, { tags: ["Basic"] });
-
-Border.prototype.publish("content", [], "widgetArray", "widgets", null, { tags: ["Intermediate"] });
-
-Border.prototype.publish("gutter", 0, "number", "Gap Between Widgets", null, { tags: ["Basic"] });
-
-Border.prototype.publish("topShrinkWrap", false, "boolean", "'Top' Cell shrinks to fit content", null, { tags: ["Intermediate"] });
-Border.prototype.publish("leftShrinkWrap", false, "boolean", "'Left' Cell shrinks to fit content", null, { tags: ["Intermediate"] });
-Border.prototype.publish("rightShrinkWrap", false, "boolean", "'Right' Cell shrinks to fit content", null, { tags: ["Intermediate"] });
-Border.prototype.publish("bottomShrinkWrap", false, "boolean", "'Bottom' Cell shrinks to fit content", null, { tags: ["Intermediate"] });
-
-Border.prototype.publish("topSize", 0, "number", "Height of the 'Top' Cell (px)", null, { tags: ["Private"] });
-Border.prototype.publish("leftSize", 0, "number", "Width of the 'Left' Cell (px)", null, { tags: ["Private"] });
-Border.prototype.publish("rightSize", 0, "number", "Width of the 'Right' Cell (px)", null, { tags: ["Private"] });
-Border.prototype.publish("bottomSize", 0, "number", "Height of the 'Bottom' Cell (px)", null, { tags: ["Private"] });
-
-Border.prototype.publish("topPercentage", 20, "number", "Percentage (of parent) Height of the 'Top' Cell", null, { tags: ["Private"] });
-Border.prototype.publish("leftPercentage", 20, "number", "Percentage (of parent) Width of the 'Left' Cell", null, { tags: ["Private"] });
-Border.prototype.publish("rightPercentage", 20, "number", "Percentage (of parent) Width of the 'Right' Cell", null, { tags: ["Private"] });
-Border.prototype.publish("bottomPercentage", 20, "number", "Percentage (of parent) Height of the 'Bottom' Cell", null, { tags: ["Private"] });
-
-Border.prototype.publish("surfacePadding", 0, "number", "Cell Padding (px)", null, { tags: ["Intermediate"] });
-
-Border.prototype.publish("sectionTypes", [], "array", "Section Types sharing an index with 'content' - Used to determine position/size.", null, { tags: ["Private"] });
+import { d3Event, HTMLWidget, Platform, select as d3Select, selectAll as d3SelectAll, Utility } from "@hpcc-js/common";
+import { drag as d3Drag } from "d3-drag";
+import { Cell } from "./Cell.ts";
+
+import "../src/Border.css";
+
+export class Border extends HTMLWidget {
+    _colCount: number;
+    _rowCount: number;
+    _colSize: number;
+    _rowSize: number;
+    _shrinkWrapBoxes;
+    _watch;
+    _offsetX;
+    _offsetY;
+    _dragCell;
+    _dragCellSize;
+    _dragCellStartSize;
+    _handleTop;
+    _handleLeft;
+    _dragPrevX;
+    _dragPrevY;
+    _cellSizes;
+    contentDiv;
+    _scrollBarWidth;
+    _borderHandles;
+    _sectionTypeArr;
+
+    constructor() {
+        super();
+
+        this._tag = "div";
+
+        this._colCount = 0;
+        this._rowCount = 0;
+        this._colSize = 0;
+        this._rowSize = 0;
+
+        this._shrinkWrapBoxes = {};
+
+        this.content([]);
+        this.sectionTypes([]);
+    }
+
+    watchWidget(widget) {
+        if (this._watch === undefined) {
+            this._watch = {};
+        }
+        if (this._watch[widget.id()]) {
+            this._watch[widget.id()].remove();
+            delete this._watch[widget.id()];
+        }
+        if (widget) {
+            const context = this;
+            this._watch[widget.id()] = widget.monitor(function (paramId, newVal, oldVal) {
+                if (oldVal !== newVal) {
+                    context.lazyPostUpdate();
+                }
+            });
+        }
+    }
+
+    lazyPostUpdate = Utility.debounce(function () {
+        this.postUpdate();
+    }, 100);
+
+    applyLayoutType() {
+        const layoutObj = this.borderLayoutObject();
+        this.content().forEach(function (cell, i) {
+            cell._fixedLeft = layoutObj[this.sectionTypes()[i]].left;
+            cell._fixedTop = layoutObj[this.sectionTypes()[i]].top;
+            cell._fixedWidth = layoutObj[this.sectionTypes()[i]].width;
+            cell._fixedHeight = layoutObj[this.sectionTypes()[i]].height;
+            cell._dragHandles = this.cellSpecificDragHandles(this.sectionTypes()[i]);
+        }, this);
+    }
+    cellSpecificDragHandles(sectionType) {
+        switch (sectionType) {
+            case "top": return ["s"];
+            case "right": return ["w"];
+            case "bottom": return ["n"];
+            case "left": return ["e"];
+            case "center": return [];
+        }
+    }
+
+    borderLayoutObject(layoutType?) {
+        const retObj = {};
+        const context = this;
+        let topSize;
+        let topPerc;
+        let bottomSize;
+        let bottomPerc;
+        let leftSize;
+        let leftPerc;
+        let rightSize;
+        let rightPerc;
+
+        const bcRect = this.target().getBoundingClientRect();
+        const gridRect: any = {};
+        gridRect.top = bcRect.top;
+        gridRect.left = bcRect.left;
+        gridRect.bottom = bcRect.bottom;
+        gridRect.right = bcRect.right;
+        if (this.target() instanceof SVGElement) {
+            gridRect.width = parseFloat(this.target().getAttribute("width"));
+            gridRect.height = parseFloat(this.target().getAttribute("height"));
+        } else {
+            gridRect.width = bcRect.width;
+            gridRect.height = bcRect.height;
+        }
+        if (this.sectionTypes().indexOf("top") !== -1) {
+            topSize = this.topSize();
+            topPerc = this.topPercentage();
+            if (typeof (this._shrinkWrapBoxes["top"]) !== "undefined") {
+                topSize = this._shrinkWrapBoxes["top"].height + this.gutter();
+                topPerc = 0;
+            }
+        }
+        if (this.sectionTypes().indexOf("bottom") !== -1) {
+            bottomSize = this.bottomSize();
+            bottomPerc = this.bottomPercentage();
+            if (typeof (this._shrinkWrapBoxes["bottom"]) !== "undefined") {
+                bottomSize = this._shrinkWrapBoxes["bottom"].height + this.gutter();
+                bottomPerc = 0;
+            }
+        }
+        if (this.sectionTypes().indexOf("left") !== -1) {
+            leftSize = this.leftSize();
+            leftPerc = this.leftPercentage();
+            if (typeof (this._shrinkWrapBoxes["left"]) !== "undefined") {
+                leftSize = this._shrinkWrapBoxes["left"].width + this.gutter();
+                leftPerc = 0;
+            }
+        }
+        if (this.sectionTypes().indexOf("right") !== -1) {
+            rightSize = this.rightSize();
+            rightPerc = this.rightPercentage();
+            if (typeof (this._shrinkWrapBoxes["right"]) !== "undefined") {
+                rightSize = this._shrinkWrapBoxes["right"].width + this.gutter();
+                rightPerc = 0;
+            }
+        }
+
+        const t = _sectionPlacementObject({
+            width: { "px": 0, "%": 100 },
+            height: { "px": topSize, "%": topPerc },
+            top: { "px": 0, "%": 0 },
+            left: { "px": 0, "%": 0 }
+        });
+        const b = _sectionPlacementObject({
+            width: { "px": 0, "%": 100 },
+            height: { "px": bottomSize, "%": bottomPerc },
+            top: { "px": 0, "%": 100 },
+            left: { "px": 0, "%": 0 }
+        });
+        b.top -= b.height;
+        const l = _sectionPlacementObject({
+            width: { "px": leftSize, "%": leftPerc },
+            height: { "px": -t.height - b.height, "%": 100 },
+            top: { "px": t.height, "%": 0 },
+            left: { "px": 0, "%": 0 }
+        });
+        const r = _sectionPlacementObject({
+            width: { "px": rightSize, "%": rightPerc },
+            height: { "px": -t.height - b.height, "%": 100 },
+            top: { "px": t.height, "%": 0 },
+            left: { "px": 0, "%": 100 }
+        });
+        r.left -= r.width;
+        const c = _sectionPlacementObject({
+            width: { "px": -r.width - l.width, "%": 100 },
+            height: { "px": -t.height - b.height, "%": 100 },
+            top: { "px": t.height, "%": 0 },
+            left: { "px": l.width, "%": 0 }
+        });
+        retObj["top"] = t;
+        retObj["bottom"] = b;
+        retObj["right"] = r;
+        retObj["left"] = l;
+        retObj["center"] = c;
+        return retObj;
+
+        function _sectionPlacementObject(obj) {
+            obj.width["px"] = typeof (obj.width["px"]) !== "undefined" ? obj.width["px"] : 0;
+            obj.width["%"] = typeof (obj.width["%"]) !== "undefined" ? obj.width["%"] : 0;
+            obj.height["px"] = typeof (obj.height["px"]) !== "undefined" ? obj.height["px"] : 0;
+            obj.height["%"] = typeof (obj.height["%"]) !== "undefined" ? obj.height["%"] : 0;
+            const ret = {
+                width: obj.width["px"] + (obj.width["%"] / 100 * context.width()),
+                height: obj.height["px"] + (obj.height["%"] / 100 * context.height()),
+                top: obj.top["px"] + (obj.top["%"] / 100 * context.height()) + context.gutter() / 2,
+                left: obj.left["px"] + (obj.left["%"] / 100 * context.width()) + context.gutter() / 2
+            };
+            return ret;
+        }
+    }
+
+    clearContent(sectionType) {
+        if (!sectionType) {
+            this.content().forEach(function (contentWidget) {
+                contentWidget.target(null);
+                return false;
+            });
+            d3Select("#" + this.id() + " > div.borderHandle")
+                .classed("borderHandleDisabled", true)
+                ;
+            delete this._watch;
+            this.content([]);
+            this.sectionTypes([]);
+        } else {
+            const idx = this.sectionTypes().indexOf(sectionType);
+            if (idx >= 0) {
+                if (this._watch && this.content()[idx]) {
+                    delete this._watch[this.content()[idx].id()];
+                }
+                this.content()[idx].target(null);
+                d3Select("#" + this.id() + " > div.borderHandle_" + sectionType)
+                    .classed("borderHandleDisabled", true)
+                    ;
+                this.content().splice(idx, 1);
+                this.sectionTypes().splice(idx, 1);
+            }
+        }
+    }
+
+    hasContent(sectionType, widget, title) {
+        return this.sectionTypes().indexOf(sectionType) >= 0;
+    }
+
+    setContent(sectionType, widget, title?) {
+        this.clearContent(sectionType);
+        title = typeof (title) !== "undefined" ? title : "";
+        if (widget) {
+            const cell = new Cell()
+                .surfaceBorderWidth(0)
+                .widget(widget)
+                .title(title)
+                ;
+            this.watchWidget(widget);
+            this.content().push(cell);
+            this.sectionTypes().push(sectionType);
+        }
+        return this;
+    }
+
+    getCell(id) {
+        const idx = this.sectionTypes().indexOf(id);
+        if (idx >= 0) {
+            return this.content()[idx];
+        }
+        return null;
+    }
+
+    getContent(id) {
+        const idx = this.sectionTypes().indexOf(id);
+        if (idx >= 0) {
+            return this.content()[idx].widget();
+        }
+        return null;
+    }
+
+    setLayoutOffsets() {
+        this._offsetX = this._element.node().getBoundingClientRect().left + (this.gutter() / 2);
+        this._offsetY = this._element.node().getBoundingClientRect().top + (this.gutter() / 2);
+    }
+
+    dragStart(handle) {
+        const event = d3Event();
+        event.sourceEvent.stopPropagation();
+        const context = this;
+
+        this._dragCell = handle;
+        this._dragCellStartSize = this[handle + "Size"]();
+
+        if (this[handle + "ShrinkWrap"]()) {
+            this[handle + "Percentage"](0);
+            this[handle + "ShrinkWrap"](false);
+        }
+
+        const handleElm = d3Select("#" + context.id() + " > div.borderHandle_" + handle);
+        context._handleTop = parseFloat(handleElm.style("top").split("px")[0]);
+        context._handleLeft = parseFloat(handleElm.style("left").split("px")[0]);
+
+        this._dragPrevX = event.sourceEvent.clientX;
+        this._dragPrevY = event.sourceEvent.clientY;
+    }
+    dragTick(handle) {
+        const context = this;
+
+        const event = d3Event();
+        const xDelta = this._dragPrevX - event.sourceEvent.clientX;
+        const yDelta = this._dragPrevY - event.sourceEvent.clientY;
+
+        switch (handle) {
+            case "top":
+            case "bottom":
+                _moveHandles(handle, yDelta);
+                break;
+            case "right":
+            case "left":
+                _moveHandles(handle, xDelta);
+                break;
+        }
+
+        function _moveHandles(handle2, delta) {
+            if (delta === 0) return;
+            const handles = d3SelectAll("#" + context.id() + " > div.borderHandle");
+            const grabbedHandle = d3Select("#" + context.id() + " > div.borderHandle_" + handle2);
+
+            if (grabbedHandle.classed("borderHandle_top")) {
+                grabbedHandle.style("top", (context._handleTop - delta) + "px");
+                context._cellSizes.topHeight = context._handleTop - delta;
+                context._cellSizes.leftHeight = context._cellSizes.height;
+                context._cellSizes.leftHeight -= context._cellSizes.topHeight;
+                context._cellSizes.leftHeight -= context._cellSizes.bottomHeight;
+                context._cellSizes.rightHeight = context._cellSizes.leftHeight;
+            } else if (grabbedHandle.classed("borderHandle_right")) {
+                grabbedHandle.style("left", (context._handleLeft - delta) + "px");
+                context._cellSizes.rightWidth = context._cellSizes.width - context._handleLeft + delta;
+            } else if (grabbedHandle.classed("borderHandle_bottom")) {
+                grabbedHandle.style("top", (context._handleTop - delta) + "px");
+                context._cellSizes.bottomHeight = context._cellSizes.height - context._handleTop + delta;
+                context._cellSizes.leftHeight = context._cellSizes.height;
+                context._cellSizes.leftHeight -= context._cellSizes.bottomHeight;
+                context._cellSizes.leftHeight -= context._cellSizes.topHeight;
+                context._cellSizes.rightHeight = context._cellSizes.leftHeight;
+            } else if (grabbedHandle.classed("borderHandle_left")) {
+                grabbedHandle.style("left", (context._handleLeft - delta) + "px");
+                context._cellSizes.leftWidth = context._handleLeft - delta;
+            }
+
+            handles.each(function () {
+                const handle3 = d3Select(this);
+                if (handle3.classed("borderHandle_top")) {
+                    handle3.style("width", context._cellSizes.width + "px");
+                    handle3.style("top", (context._cellSizes.topHeight - 3) + "px");
+                } else if (handle3.classed("borderHandle_right")) {
+                    handle3.style("left", (context._cellSizes.width - context._cellSizes.rightWidth) + "px");
+                    handle3.style("top", (context._cellSizes.topHeight + 3) + "px");
+                    handle3.style("height", context._cellSizes.rightHeight + "px");
+                } else if (handle3.classed("borderHandle_bottom")) {
+                    handle3.style("width", context._cellSizes.width + "px");
+                    handle3.style("top", (context._cellSizes.height - context._cellSizes.bottomHeight - 3) + "px");
+                } else if (handle3.classed("borderHandle_left")) {
+                    handle3.style("left", context._cellSizes.leftWidth + "px");
+                    handle3.style("height", context._cellSizes.leftHeight + "px");
+                    handle3.style("top", (context._cellSizes.topHeight + 3) + "px");
+                }
+            });
+        }
+    }
+    dragEnd(handle) {
+        if (handle) {
+            const event = d3Event();
+            const xDelta = this._dragPrevX - event.sourceEvent.clientX;
+            const yDelta = this._dragPrevY - event.sourceEvent.clientY;
+
+            switch (handle) {
+                case "top":
+                    if (yDelta !== 0) {
+                        this.topPercentage(0);
+                        this.topSize(this.topSize() === 0 ? this.getContent("top").getBBox().height - yDelta : this.topSize() - yDelta);
+                    }
+                    break;
+                case "right":
+                    if (xDelta !== 0) {
+                        this.rightPercentage(0);
+                        this.rightSize(this.rightSize() === 0 ? this.getContent("right").getBBox().width + xDelta : this.rightSize() + xDelta);
+                    }
+                    break;
+                case "bottom":
+                    if (yDelta !== 0) {
+                        this.bottomPercentage(0);
+                        this.bottomSize(this.bottomSize() === 0 ? this.getContent("bottom").getBBox().height + yDelta : this.bottomSize() + yDelta);
+                    }
+                    break;
+                case "left":
+                    if (xDelta !== 0) {
+                        this.leftPercentage(0);
+                        this.leftSize(this.leftSize() === 0 ? this.getContent("left").getBBox().width - xDelta : this.leftSize() - xDelta);
+                    }
+                    break;
+            }
+
+            this._dragPrevX = event.sourceEvent.clientX;
+            this._dragPrevY = event.sourceEvent.clientY;
+        }
+        this.render();
+    }
+
+    size(_?) {
+        const retVal = HTMLWidget.prototype.size.apply(this, arguments);
+        if (arguments.length && this.contentDiv) {
+            this.contentDiv
+                .style("width", this._size.width + "px")
+                .style("height", this._size.height + "px")
+                ;
+        }
+        return retVal;
+    }
+
+    enter(domNode, element) {
+        super.enter(domNode, element);
+        const context = this;
+        element.style("position", "relative");
+        this.contentDiv = element.append("div").classed("border-content", true);
+        this._scrollBarWidth = Platform.getScrollbarWidth();
+        this._borderHandles = ["top", "left", "right", "bottom"];
+
+        const handles = element.selectAll("div.borderHandle").data(this._borderHandles);
+        handles.enter().append("div")
+            .classed("borderHandle", true)
+            .each(function (handle) {
+                const h = d3Select(this);
+                h.classed("borderHandle_" + handle, true)
+                    .classed("borderHandleDisabled", context.getContent(handle) === null)
+                    ;
+            });
+    }
+
+    update(domNode, element) {
+        super.update(domNode, element);
+        this._sectionTypeArr = this.sectionTypes();
+        const context = this;
+
+        element.classed("design-mode", this.designMode());
+
+        this.setLayoutOffsets();
+
+        const rows = this.contentDiv.selectAll(".cell_" + this._id).data(this.content(), function (d) { return d._id; });
+        const rowsUpdate = rows.enter().append("div")
+            .classed("cell_" + this._id, true)
+            .style("position", "absolute")
+            .each(function (d, i) {
+                d3Select(this).classed("border-cell border-cell-" + context._sectionTypeArr[i], true);
+                d.target(this);
+                d3Select("#" + context.id() + " > div.borderHandle_" + context._sectionTypeArr[i])
+                    .classed("borderHandleDisabled", false);
+            }).merge(rows);
+        rowsUpdate
+            .each(function (d, idx) {
+                const sectionType = context.sectionTypes()[idx];
+                if (typeof (context[sectionType + "ShrinkWrap"]) !== "undefined" && context[sectionType + "ShrinkWrap"]()) {
+                    d.render();
+                    context._shrinkWrapBoxes[sectionType] = d.widget().getBBox(true);
+                } else {
+                    delete context._shrinkWrapBoxes[sectionType];
+                }
+            });
+
+        const drag = d3Drag()
+            .on("start", function (d, i) { context.dragStart.call(context, d, i); })
+            .on("drag", function (d, i) { context.dragTick.call(context, d, i); })
+            .on("end", function (d, i) { context.dragEnd.call(context, d, i); })
+            ;
+        if (this.designMode()) {
+            element.selectAll("#" + this.id() + " > div.borderHandle").call(drag);
+        } else {
+            element.selectAll("#" + this.id() + " > div.borderHandle").on(".drag", null);
+        }
+
+        const layoutObj = this.borderLayoutObject();
+        this.content().forEach(function (cell, i) {
+            cell._fixedLeft = layoutObj[this.sectionTypes()[i]].left;
+            cell._fixedTop = layoutObj[this.sectionTypes()[i]].top;
+            cell._fixedWidth = layoutObj[this.sectionTypes()[i]].width;
+            cell._fixedHeight = layoutObj[this.sectionTypes()[i]].height;
+            cell._dragHandles = [];
+        }, this);
+
+        rowsUpdate
+            .style("left", function (d) { return d._fixedLeft + "px"; })
+            .style("top", function (d) { return d._fixedTop + "px"; })
+            .style("width", function (d) { return d._fixedWidth - context.gutter() + "px"; })
+            .style("height", function (d) { return d._fixedHeight - context.gutter() + "px"; })
+            .each(function (d) {
+                d._placeholderElement
+                    .attr("draggable", context.designMode())
+                    .selectAll(".dragHandle")
+                    .attr("draggable", context.designMode())
+                    ;
+                d
+                    .surfacePadding(context.surfacePadding())
+                    .resize()
+                    ;
+            });
+        rows.exit().each(function (d) {
+            d.target(null);
+        }).remove();
+
+        this.getCellSizes();
+
+        element
+            .selectAll("#" + this.id() + " > div.borderHandle")
+            .each(function () {
+                const handle = d3Select(this);
+                if (handle.classed("borderHandle_top")) {
+                    handle.style("width", context._cellSizes.width + "px");
+                    handle.style("top", (context._cellSizes.topHeight - 3) + "px");
+                } else if (handle.classed("borderHandle_right")) {
+                    handle.style("left", (context._cellSizes.width - context._cellSizes.rightWidth) + "px");
+                    handle.style("top", (context._cellSizes.topHeight + 3) + "px");
+                    handle.style("height", context._cellSizes.rightHeight + "px");
+                } else if (handle.classed("borderHandle_bottom")) {
+                    handle.style("width", context._cellSizes.width + "px");
+                    handle.style("top", (context._cellSizes.height - context._cellSizes.bottomHeight - 3) + "px");
+                } else if (handle.classed("borderHandle_left")) {
+                    handle.style("left", context._cellSizes.leftWidth + "px");
+                    handle.style("height", context._cellSizes.leftHeight + "px");
+                    handle.style("top", (context._cellSizes.topHeight + 3) + "px");
+                }
+
+            })
+            ;
+    }
+
+    getCellSizes() {
+        const context = this;
+        context._cellSizes = {};
+        const contentRect = this.element().node().getBoundingClientRect();
+        context._cellSizes.width = contentRect.width;
+        context._cellSizes.height = contentRect.height;
+        this.element()
+            .selectAll("#" + this.id() + " > div > div.border-cell")
+            .each(function () {
+                const cell = d3Select(this);
+                if (typeof cell.node === "function") {
+                    const rect = cell.node().getBoundingClientRect();
+                    if (cell.classed("border-cell-top")) {
+                        context._cellSizes.topHeight = rect.height;
+                    } else if (cell.classed("border-cell-left")) {
+                        context._cellSizes.leftWidth = rect.width;
+                        context._cellSizes.leftHeight = rect.height;
+                    } else if (cell.classed("border-cell-right")) {
+                        context._cellSizes.rightWidth = rect.width;
+                        context._cellSizes.rightHeight = rect.height;
+                    } else if (cell.classed("border-cell-bottom")) {
+                        context._cellSizes.bottomHeight = rect.height;
+                    }
+                }
+            });
+        const sizes = ["height", "width", "topHeight", "bottomHeight", "leftHeight", "rightHeight", "leftWidth", "rightWidth"];
+        sizes.forEach(function (size) {
+            context._cellSizes[size] = context._cellSizes[size] === undefined ? 0 : context._cellSizes[size];
+        });
+    }
+
+    postUpdate(domNode, element) {
+        const context = this;
+        this.content().forEach(function (n) {
+            if (n._element.node() !== null && n.widget()) {
+                const prevBox = n.widget().getBBox(false, true);
+                const currBox = n.widget().getBBox(true, true);
+                if (prevBox.width !== currBox.width || prevBox.height !== currBox.height) {
+                    context.lazyRender();
+                }
+            }
+        });
+    }
+
+    exit(domNode, element) {
+        this.content().forEach(w => w.target(null));
+        super.exit(domNode, element);
+    }
+}
+Border.prototype._class += " layout_Border";
+
+export interface Border {
+    designMode(): boolean;
+    designMode(_: boolean): this;
+
+    content(): any[];
+    content(_: any[]): this;
+
+    gutter(): number;
+    gutter(_: number): this;
+
+    topShrinkWrap(): boolean;
+    topShrinkWrap(_: boolean): this;
+    leftShrinkWrap(): boolean;
+    leftShrinkWrap(_: boolean): this;
+    rightShrinkWrap(): boolean;
+    rightShrinkWrap(_: boolean): this;
+    bottomShrinkWrap(): boolean;
+    bottomShrinkWrap(_: boolean): this;
+
+    topSize(): number;
+    topSize(_: number): this;
+    leftSize(): number;
+    leftSize(_: number): this;
+    rightSize(): number;
+    rightSize(_: number): this;
+    bottomSize(): number;
+    bottomSize(_: number): this;
+
+    topPercentage(): number;
+    topPercentage(_: number): this;
+    leftPercentage(): number;
+    leftPercentage(_: number): this;
+    rightPercentage(): number;
+    rightPercentage(_: number): this;
+    bottomPercentage(): number;
+    bottomPercentage(_: number): this;
+
+    surfacePadding(): number;
+    surfacePadding(_: number): this;
+
+    sectionTypes(): any[];
+    sectionTypes(_: any[]): this;
+}
+
+Border.prototype.publish("designMode", false, "boolean", "Design Mode", null, { tags: ["Basic"] });
+
+Border.prototype.publish("content", [], "widgetArray", "widgets", null, { tags: ["Intermediate"] });
+
+Border.prototype.publish("gutter", 0, "number", "Gap Between Widgets", null, { tags: ["Basic"] });
+
+Border.prototype.publish("topShrinkWrap", false, "boolean", "'Top' Cell shrinks to fit content", null, { tags: ["Intermediate"] });
+Border.prototype.publish("leftShrinkWrap", false, "boolean", "'Left' Cell shrinks to fit content", null, { tags: ["Intermediate"] });
+Border.prototype.publish("rightShrinkWrap", false, "boolean", "'Right' Cell shrinks to fit content", null, { tags: ["Intermediate"] });
+Border.prototype.publish("bottomShrinkWrap", false, "boolean", "'Bottom' Cell shrinks to fit content", null, { tags: ["Intermediate"] });
+
+Border.prototype.publish("topSize", 0, "number", "Height of the 'Top' Cell (px)", null, { tags: ["Private"] });
+Border.prototype.publish("leftSize", 0, "number", "Width of the 'Left' Cell (px)", null, { tags: ["Private"] });
+Border.prototype.publish("rightSize", 0, "number", "Width of the 'Right' Cell (px)", null, { tags: ["Private"] });
+Border.prototype.publish("bottomSize", 0, "number", "Height of the 'Bottom' Cell (px)", null, { tags: ["Private"] });
+
+Border.prototype.publish("topPercentage", 20, "number", "Percentage (of parent) Height of the 'Top' Cell", null, { tags: ["Private"] });
+Border.prototype.publish("leftPercentage", 20, "number", "Percentage (of parent) Width of the 'Left' Cell", null, { tags: ["Private"] });
+Border.prototype.publish("rightPercentage", 20, "number", "Percentage (of parent) Width of the 'Right' Cell", null, { tags: ["Private"] });
+Border.prototype.publish("bottomPercentage", 20, "number", "Percentage (of parent) Height of the 'Bottom' Cell", null, { tags: ["Private"] });
+
+Border.prototype.publish("surfacePadding", 0, "number", "Cell Padding (px)", null, { tags: ["Intermediate"] });
+
+Border.prototype.publish("sectionTypes", [], "array", "Section Types sharing an index with 'content' - Used to determine position/size.", null, { tags: ["Private"] });