@hpcc-js/layout 3.5.7 → 3.5.10

package/src/Grid.ts

@@ -1,576 +1,576 @@
-import { d3Event, drag as d3Drag, HTMLWidget, Platform, select as d3Select, Utility } from "@hpcc-js/common";
-import * as _GridList from "grid-list";
-import { Cell } from "./Cell.ts";
-
-import "../src/Grid.css";
-
-const GridList = (_GridList && _GridList.default) || _GridList;
-
-export type ICellPosition = [number, number, number, number];
-
-export class Grid extends HTMLWidget {
-    divItems;
-
-    gridList;
-    items;
-    itemsMap;
-    origItems;
-    cellWidth;
-    cellHeight;
-    dragItem;
-    dragItemPos;
-
-    _d3Drag;
-    _d3DragResize;
-    _selectionBag;
-    _scrollBarWidth;
-
-    constructor() {
-        super();
-
-        this._tag = "div";
-        this._selectionBag = new Utility.Selection(this);
-
-        this.content([]);
-    }
-
-    getDimensions() {
-        const size = { width: 0, height: 0 };
-        this.content().forEach(function (cell) {
-            if (size.width < cell.gridCol() + cell.gridColSpan()) {
-                size.width = cell.gridCol() + cell.gridColSpan();
-            }
-            if (size.height < cell.gridRow() + cell.gridRowSpan()) {
-                size.height = cell.gridRow() + cell.gridRowSpan();
-            }
-        }, this);
-        return size;
-    }
-
-    clearContent(widget) {
-        this.content(this.content().filter(function (contentWidget) {
-            if (!widget) {
-                contentWidget.target(null);
-                return false;
-            }
-            let w: any = contentWidget;
-            while (w) {
-                if (widget === w) {
-                    contentWidget.target(null);
-                    return false;
-                }
-                w = w.widget ? w.widget() : null;
-            }
-            return true;
-        }));
-    }
-
-    setContent(row, col, widget, title?, rowSpan?, colSpan?) {
-        rowSpan = rowSpan || 1;
-        colSpan = colSpan || 1;
-        title = title || "";
-        this.content(this.content().filter(function (contentWidget) {
-            if (contentWidget.gridRow() === row && contentWidget.gridCol() === col) {
-                contentWidget.target(null);
-                return false;
-            }
-            return true;
-        }));
-        if (widget) {
-            const cell = new Cell()
-                .gridRow(row)
-                .gridCol(col)
-                .widget(widget)
-                .title(title)
-                .gridRowSpan(rowSpan)
-                .gridColSpan(colSpan)
-                ;
-            this.content().push(cell);
-        }
-        return this;
-    }
-
-    sortedContent() {
-        return this.content().sort(function (l, r) {
-            if (l.gridRow() === r.gridRow()) {
-                return l.gridCol() - r.gridCol();
-            }
-            return l.gridRow() - r.gridRow();
-        });
-    }
-
-    getCell(row, col) {
-        let retVal = null;
-        this.content().some(function (cell) {
-            if (row >= cell.gridRow() && row < cell.gridRow() + cell.gridRowSpan() &&
-                col >= cell.gridCol() && col < cell.gridCol() + cell.gridColSpan()) {
-                retVal = cell;
-                return true;
-            }
-            return false;
-        });
-        return retVal;
-    }
-
-    getWidgetCell(id) {
-        let retVal = null;
-        this.content().some(function (cell) {
-            if (cell.widget().id() === id) {
-                retVal = cell;
-                return true;
-            }
-            return false;
-        });
-        return retVal;
-    }
-
-    getContent(id) {
-        let retVal = null;
-        this.content().some(function (cell) {
-            if (cell.widget().id() === id) {
-                retVal = cell.widget();
-                return true;
-            }
-            return false;
-        });
-        return retVal;
-    }
-
-    cellToGridItem(cell) {
-        return {
-            x: cell.gridCol(),
-            y: cell.gridRow(),
-            w: cell.gridColSpan(),
-            h: cell.gridRowSpan(),
-            id: cell.id(),
-            cell
-        };
-    }
-
-    gridItemToCell(item) {
-        item.cell
-            .gridCol(item.x)
-            .gridRow(item.y)
-            .gridColSpan(item.w)
-            .gridRowSpan(item.h)
-            ;
-    }
-
-    resetItemsPos() {
-        this.origItems.forEach(function (origItem) {
-            const item = this.itemsMap[origItem.id];
-            item.x = origItem.x;
-            item.y = origItem.y;
-        }, this);
-    }
-
-    initGridList() {
-        this.itemsMap = {};
-        this.items = this.content().map(function (cell) {
-            const retVal = this.cellToGridItem(cell);
-            this.itemsMap[retVal.id] = retVal;
-            return retVal;
-        }, this);
-        this.origItems = this.content().map(this.cellToGridItem);
-        this.gridList = new GridList(this.items, {
-            direction: this.snapping(),
-            lanes: this.snapping() === "horizontal" ? this.snappingRows() : this.snappingColumns()
-        });
-    }
-
-    killGridList() {
-        this.gridList = null;
-        delete this.items;
-        delete this.itemsMap;
-    }
-
-    enter(domNode, element) {
-        super.enter(domNode, element);
-
-        this._scrollBarWidth = Platform.getScrollbarWidth();
-
-        const context = this;
-        this._d3Drag = d3Drag()
-            .subject(function (_d) {
-                const d = context.cellToGridItem(_d);
-                return { x: d.x * context.cellWidth, y: d.y * context.cellHeight };
-            })
-            .on("start", function (_d: any) {
-                if (!context.designMode()) return;
-                d3Event().sourceEvent.stopPropagation();
-                context.initGridList();
-                const d = context.itemsMap[_d.id()];
-                context.dragItem = element.append("div")
-                    .attr("class", "dragging")
-                    .style("transform", function () { return "translate(" + d.x * context.cellWidth + "px, " + d.y * context.cellHeight + "px)"; })
-                    .style("width", function () { return d.w * context.cellWidth - context.gutter() + "px"; })
-                    .style("height", function () { return d.h * context.cellHeight - context.gutter() + "px"; })
-                    ;
-                context.selectionBagClick(_d);
-            })
-            .on("drag", function (_d: any) {
-                if (!context.designMode()) return;
-                const event = d3Event();
-                event.sourceEvent.stopPropagation();
-                const d = context.itemsMap[_d.id()];
-                if (event.x < 0) {
-                    event.x = 0;
-                }
-                if (event.x + d.w * context.cellWidth > context.snappingColumns() * context.cellWidth) {
-                    event.x = context.snappingColumns() * context.cellWidth - d.w * context.cellWidth;
-                }
-                if (event.y < 0) {
-                    event.y = 0;
-                }
-                if (event.y + d.h * context.cellWidth > context.snappingRows() * context.cellWidth) {
-                    event.y = context.snappingRows() * context.cellWidth - d.h * context.cellWidth;
-                }
-                const pos = [Math.max(0, Math.floor((event.x + context.cellWidth / 2) / context.cellWidth)), Math.max(0, Math.floor((event.y + context.cellHeight / 2) / context.cellHeight))];
-                if (d.x !== pos[0] || d.y !== pos[1]) {
-                    if (context.snapping() !== "none") {
-                        context.resetItemsPos();
-                        context.gridList.moveItemToPosition(d, pos);
-                    } else {
-                        d.x = pos[0];
-                        d.y = pos[1];
-                    }
-                    if (_d.gridCol() !== d.x || _d.gridRow() !== d.y) {
-                        context.items.forEach(context.gridItemToCell);
-                        context.updateGrid(false, 100);
-                    }
-                }
-                context.dragItem
-                    .style("transform", function () { return "translate(" + event.x + "px, " + event.y + "px)"; })
-                    .style("width", function () { return d.w * context.cellWidth + "px"; })
-                    .style("height", function () { return d.h * context.cellHeight + "px"; })
-                    ;
-            })
-            .on("end", function () {
-                if (!context.designMode()) return;
-                d3Event().sourceEvent.stopPropagation();
-                context.dragItem.remove();
-                context.dragItem = null;
-                context.killGridList();
-            })
-            ;
-
-        this._d3DragResize = d3Drag()
-            .subject(function (_d) {
-                const d = context.cellToGridItem(_d);
-                return { x: (d.x + d.w - 1) * context.cellWidth, y: (d.y + d.h - 1) * context.cellHeight };
-            })
-            .on("start", function (_d: any) {
-                if (!context.designMode()) return;
-                d3Event().sourceEvent.stopPropagation();
-                context.initGridList();
-                const d = context.itemsMap[_d.id()];
-                context.dragItem = element.append("div")
-                    .attr("class", "resizing")
-                    .style("transform", function () { return "translate(" + d.x * context.cellWidth + "px, " + d.y * context.cellHeight + "px)"; })
-                    .style("width", function () { return d.w * context.cellWidth - context.gutter() + "px"; })
-                    .style("height", function () { return d.h * context.cellHeight - context.gutter() + "px"; })
-                    ;
-                context.dragItemPos = { x: d.x, y: d.y };
-            })
-            .on("drag", function (_d: any) {
-                if (!context.designMode()) return;
-                const event = d3Event();
-                event.sourceEvent.stopPropagation();
-                const d = context.itemsMap[_d.id()];
-                const pos = [Math.max(0, Math.round(event.x / context.cellWidth)), Math.max(0, Math.round(event.y / context.cellHeight))];
-                const size = {
-                    w: Math.max(1, pos[0] - d.x + 1),
-                    h: Math.max(1, pos[1] - d.y + 1)
-                };
-                if (d.w !== size.w || d.h !== size.h) {
-                    if (context.snapping() !== "none") {
-                        context.resetItemsPos();
-                        context.gridList.resizeItem(d, size);
-                    } else {
-                        d.w = size.w;
-                        d.h = size.h;
-                    }
-                    if (_d.gridColSpan() !== d.w || _d.gridRowSpan() !== d.h) {
-                        context.items.forEach(context.gridItemToCell);
-                        context.updateGrid(d.id, 100);
-                    }
-                }
-                context.dragItem
-                    .style("width", function () { return (-d.x + 1) * context.cellWidth + event.x - context.gutter() + "px"; })
-                    .style("height", function () { return (-d.y + 1) * context.cellHeight + event.y - context.gutter() + "px"; })
-                    ;
-            })
-            .on("end", function () {
-                if (!context.designMode()) return;
-                d3Event().sourceEvent.stopPropagation();
-                context.dragItem.remove();
-                context.dragItem = null;
-                context.killGridList();
-            })
-            ;
-    }
-
-    updateGrid(resize, transitionDuration: number = 0, _noRender: boolean = false) {
-        transitionDuration = transitionDuration || 0;
-        const context = this;
-        this.divItems
-            .classed("draggable", this.designMode())
-            .transition().duration(transitionDuration)
-            .style("left", function (d) { return d.gridCol() * context.cellWidth + context.gutter() / 2 + "px"; })
-            .style("top", function (d) { return d.gridRow() * context.cellHeight + context.gutter() / 2 + "px"; })
-            .style("width", function (d) { return d.gridColSpan() * context.cellWidth - context.gutter() + "px"; })
-            .style("height", function (d) { return d.gridRowSpan() * context.cellHeight - context.gutter() + "px"; })
-            .on("end", function (d) {
-                d
-                    .surfaceShadow_default(context.surfaceShadow())
-                    .surfacePadding_default(context.surfacePadding())
-                    .surfaceBorderWidth_default(context.surfaceBorderWidth())
-                    .surfaceBackgroundColor_default(context.surfaceBackgroundColor())
-                    ;
-
-                if (resize === true || resize === d.id()) {
-                    d
-                        .resize()
-                        .lazyRender()
-                        ;
-                }
-            })
-            ;
-    }
-
-    update(domNode, element2) {
-        super.update(domNode, element2);
-
-        this._placeholderElement.style("overflow-x", this.fitTo() === "width" ? "hidden" : null);
-        this._placeholderElement.style("overflow-y", this.fitTo() === "width" ? "scroll" : null);
-        const dimensions = this.getDimensions();
-        const clientWidth = this.width() - (this.fitTo() === "width" ? this._scrollBarWidth : 0);
-        this.cellWidth = clientWidth / dimensions.width;
-        this.cellHeight = this.fitTo() === "all" ? this.height() / dimensions.height : this.cellWidth;
-        if (this.designMode()) {
-            const cellLaneRatio = Math.min(this.width() / this.snappingColumns(), this.height() / this.snappingRows());
-            const laneWidth = Math.floor(cellLaneRatio);
-            this.cellWidth = laneWidth;
-            this.cellHeight = this.cellWidth;
-        }
-
-        //  Grid  ---
-        const context = this;
-        const divItems = element2.selectAll("#" + this.id() + " > .ddCell").data(this.content(), function (d) { return d.id(); });
-        this.divItems = divItems.enter().append("div")
-            .attr("class", "ddCell")
-            .each(function (d) {
-                d.target(this);
-                d.__grid_watch = d.monitor(function (key, newVal, oldVal) {
-                    if (context._renderCount && (key === "snapping" || key.indexOf("grid") === 0) && newVal !== oldVal) {
-                        if (!context.gridList) {
-                            //  API Call  (only needed when not dragging) ---
-                            context.initGridList();
-                            if (context.snapping() !== "none") {
-                                context.gridList.resizeGrid(context.snapping() === "horizontal" ? context.snappingRows() : context.snappingColumns());
-                            }
-                            context.items.forEach(context.gridItemToCell);
-                            context.updateGrid(d.id(), 100);
-                            context.killGridList();
-                        }
-                    }
-                });
-                const element = d3Select(this);
-                element.append("div")
-                    .attr("class", "resizeHandle")
-                    .call(context._d3DragResize)
-                    .append("div")
-                    .attr("class", "resizeHandleDisplay")
-                    ;
-            }).merge(divItems)
-            ;
-        this.divItems.each(function (d) {
-            const element = d3Select(this);
-            if (context.designMode()) {
-                element.call(context._d3Drag);
-            } else {
-                element
-                    .on("mousedown.drag", null)
-                    .on("touchstart.drag", null)
-                    ;
-            }
-        });
-        this.divItems.select(".resizeHandle")
-            .style("display", this.designMode() ? null : "none")
-            ;
-
-        this.updateGrid(true);
-        divItems.exit()
-            .each(function (d) {
-                d.target(null);
-                if (d.__grid_watch) {
-                    d.__grid_watch.remove();
-                }
-            })
-            .remove()
-            ;
-
-        //  Snapping  ---
-        const lanesBackground = element2.selectAll("#" + this.id() + " > .laneBackground").data(this.designMode() ? [""] : []);
-        lanesBackground.enter().insert("div", ":first-child")
-            .attr("class", "laneBackground")
-            .style("left", "1px")
-            .style("top", "1px")
-            .on("click", function () {
-                context.selectionBagClear();
-            })
-            .merge(lanesBackground)
-            .style("width", (this.snappingColumns() * this.cellWidth) + "px")
-            .style("height", (this.snappingRows() * this.cellHeight) + "px")
-            ;
-        lanesBackground.exit()
-            .each(function () {
-                context.selectionBagClear();
-            })
-            .remove()
-            ;
-
-        const lanes = element2.selectAll("#" + this.id() + " > .lane").data(this.designMode() ? [""] : []);
-        lanes.enter().append("div")
-            .attr("class", "lane")
-            .style("left", "1px")
-            .style("top", "1px")
-            ;
-        lanes
-            .style("display", this.showLanes() ? null : "none")
-            .style("width", (this.snappingColumns() * this.cellWidth) + "px")
-            .style("height", (this.snappingRows() * this.cellHeight) + "px")
-            .style("background-image", "linear-gradient(to right, grey 1px, transparent 1px), linear-gradient(to bottom, grey 1px, transparent 1px)")
-            .style("background-size", this.cellWidth + "px " + this.cellHeight + "px")
-            ;
-        lanes.exit()
-            .remove()
-            ;
-    }
-
-    exit(domNode, element) {
-        this.content().forEach(w => w.target(null));
-        super.exit(domNode, element);
-    }
-
-    _createSelectionObject(d) {
-        return {
-            _id: d._id,
-            element: () => {
-                return d._element;
-            },
-            widget: d
-        };
-    }
-
-    selection(_) {
-        if (!arguments.length) return this._selectionBag.get().map(function (d) { return d._id; });
-        this._selectionBag.set(_.map(function (row) {
-            return this._createSelectionObject(row);
-        }, this));
-        return this;
-    }
-
-    selectionBagClear() {
-        if (!this._selectionBag.isEmpty()) {
-            this._selectionBag.clear();
-            this.postSelectionChange();
-        }
-    }
-
-    selectionBagClick(d) {
-        if (d !== null) {
-            const selectionObj = this._createSelectionObject(d);
-            if (d3Event().sourceEvent.ctrlKey) {
-                if (this._selectionBag.isSelected(selectionObj)) {
-                    this._selectionBag.remove(selectionObj);
-                    this.postSelectionChange();
-                } else {
-                    this._selectionBag.append(selectionObj);
-                    this.postSelectionChange();
-                }
-            } else {
-                const selected = this._selectionBag.get();
-                if (selected.length === 1 && selected[0]._id === selectionObj._id) {
-                    this.selectionBagClear();
-                } else {
-                    this._selectionBag.set([selectionObj]);
-                }
-                this.postSelectionChange();
-            }
-        }
-    }
-
-    postSelectionChange() {
-    }
-
-    applyLayout(layoutArr: ICellPosition[]) {
-        this.divItems.each((d, i) => {
-            if (layoutArr[i]) {
-                const [x, y, w, h] = layoutArr[i];
-                d
-                    .gridCol(x)
-                    .gridRow(y)
-                    .gridColSpan(w)
-                    .gridRowSpan(h)
-                    ;
-            }
-        });
-        this.updateGrid(true);
-    }
-
-    vizActivation(elem) {
-    }
-}
-Grid.prototype._class += " layout_Grid";
-
-export interface Grid {
-    designMode(): boolean;
-    designMode(_: boolean): this;
-    showLanes(): boolean;
-    showLanes(_: boolean): this;
-    fitTo(): string;
-    fitTo(_: string): this;
-
-    snapping(): string;
-    snapping(_: string): this;
-    snappingColumns(): number;
-    snappingColumns(_: number): this;
-    snappingRows(): number;
-    snappingRows(_: number): this;
-    snappingColumns_default(): number;
-    snappingColumns_default(_: number): this;
-    snappingRows_default(): number;
-    snappingRows_default(_: number): this;
-
-    gutter(): number;
-    gutter(_: number): this;
-
-    surfaceShadow(): boolean;
-    surfaceShadow(_: boolean): this;
-    surfacePadding(): string;
-    surfacePadding(_: string): this;
-    surfaceBorderWidth(): number;
-    surfaceBorderWidth(_: number): this;
-    surfaceBackgroundColor(): string;
-    surfaceBackgroundColor(_: string): this;
-
-    content(): Cell[];
-    content(_: Cell[]): this;
-}
-
-Grid.prototype.publish("designMode", false, "boolean", "Design Mode", null, { tags: ["Basic"] });
-Grid.prototype.publish("showLanes", true, "boolean", "Show snapping lanes when in design mode", null, { tags: ["Basic"], disable: w => !w.designMode() });
-Grid.prototype.publish("fitTo", "all", "set", "Sizing Strategy", ["all", "width"], { tags: ["Basic"] });
-Grid.prototype.publish("snapping", "vertical", "set", "Snapping Strategy", ["vertical", "horizontal", "none"]);
-Grid.prototype.publish("snappingColumns", 12, "number", "Snapping Columns");
-Grid.prototype.publish("snappingRows", 16, "number", "Snapping Rows");
-
-Grid.prototype.publish("gutter", 6, "number", "Gap Between Widgets", null, { tags: ["Basic"] });
-
-Grid.prototype.publish("surfaceShadow", true, "boolean", "3D Shadow");
-Grid.prototype.publish("surfacePadding", null, "string", "Cell Padding (px)", null, { tags: ["Intermediate"] });
-Grid.prototype.publish("surfaceBorderWidth", 1, "number", "Width (px) of Cell Border", null, { tags: ["Intermediate"] });
-Grid.prototype.publish("surfaceBackgroundColor", null, "html-color", "Surface Background Color", null, { tags: ["Advanced"] });
-
-Grid.prototype.publish("content", [], "widgetArray", "widgets", null, { tags: ["Basic"], render: false });
+import { d3Event, drag as d3Drag, HTMLWidget, Platform, select as d3Select, Utility } from "@hpcc-js/common";
+import * as _GridList from "grid-list";
+import { Cell } from "./Cell.ts";
+
+import "../src/Grid.css";
+
+const GridList = (_GridList && _GridList.default) || _GridList;
+
+export type ICellPosition = [number, number, number, number];
+
+export class Grid extends HTMLWidget {
+    divItems;
+
+    gridList;
+    items;
+    itemsMap;
+    origItems;
+    cellWidth;
+    cellHeight;
+    dragItem;
+    dragItemPos;
+
+    _d3Drag;
+    _d3DragResize;
+    _selectionBag;
+    _scrollBarWidth;
+
+    constructor() {
+        super();
+
+        this._tag = "div";
+        this._selectionBag = new Utility.Selection(this);
+
+        this.content([]);
+    }
+
+    getDimensions() {
+        const size = { width: 0, height: 0 };
+        this.content().forEach(function (cell) {
+            if (size.width < cell.gridCol() + cell.gridColSpan()) {
+                size.width = cell.gridCol() + cell.gridColSpan();
+            }
+            if (size.height < cell.gridRow() + cell.gridRowSpan()) {
+                size.height = cell.gridRow() + cell.gridRowSpan();
+            }
+        }, this);
+        return size;
+    }
+
+    clearContent(widget) {
+        this.content(this.content().filter(function (contentWidget) {
+            if (!widget) {
+                contentWidget.target(null);
+                return false;
+            }
+            let w: any = contentWidget;
+            while (w) {
+                if (widget === w) {
+                    contentWidget.target(null);
+                    return false;
+                }
+                w = w.widget ? w.widget() : null;
+            }
+            return true;
+        }));
+    }
+
+    setContent(row, col, widget, title?, rowSpan?, colSpan?) {
+        rowSpan = rowSpan || 1;
+        colSpan = colSpan || 1;
+        title = title || "";
+        this.content(this.content().filter(function (contentWidget) {
+            if (contentWidget.gridRow() === row && contentWidget.gridCol() === col) {
+                contentWidget.target(null);
+                return false;
+            }
+            return true;
+        }));
+        if (widget) {
+            const cell = new Cell()
+                .gridRow(row)
+                .gridCol(col)
+                .widget(widget)
+                .title(title)
+                .gridRowSpan(rowSpan)
+                .gridColSpan(colSpan)
+                ;
+            this.content().push(cell);
+        }
+        return this;
+    }
+
+    sortedContent() {
+        return this.content().sort(function (l, r) {
+            if (l.gridRow() === r.gridRow()) {
+                return l.gridCol() - r.gridCol();
+            }
+            return l.gridRow() - r.gridRow();
+        });
+    }
+
+    getCell(row, col) {
+        let retVal = null;
+        this.content().some(function (cell) {
+            if (row >= cell.gridRow() && row < cell.gridRow() + cell.gridRowSpan() &&
+                col >= cell.gridCol() && col < cell.gridCol() + cell.gridColSpan()) {
+                retVal = cell;
+                return true;
+            }
+            return false;
+        });
+        return retVal;
+    }
+
+    getWidgetCell(id) {
+        let retVal = null;
+        this.content().some(function (cell) {
+            if (cell.widget().id() === id) {
+                retVal = cell;
+                return true;
+            }
+            return false;
+        });
+        return retVal;
+    }
+
+    getContent(id) {
+        let retVal = null;
+        this.content().some(function (cell) {
+            if (cell.widget().id() === id) {
+                retVal = cell.widget();
+                return true;
+            }
+            return false;
+        });
+        return retVal;
+    }
+
+    cellToGridItem(cell) {
+        return {
+            x: cell.gridCol(),
+            y: cell.gridRow(),
+            w: cell.gridColSpan(),
+            h: cell.gridRowSpan(),
+            id: cell.id(),
+            cell
+        };
+    }
+
+    gridItemToCell(item) {
+        item.cell
+            .gridCol(item.x)
+            .gridRow(item.y)
+            .gridColSpan(item.w)
+            .gridRowSpan(item.h)
+            ;
+    }
+
+    resetItemsPos() {
+        this.origItems.forEach(function (origItem) {
+            const item = this.itemsMap[origItem.id];
+            item.x = origItem.x;
+            item.y = origItem.y;
+        }, this);
+    }
+
+    initGridList() {
+        this.itemsMap = {};
+        this.items = this.content().map(function (cell) {
+            const retVal = this.cellToGridItem(cell);
+            this.itemsMap[retVal.id] = retVal;
+            return retVal;
+        }, this);
+        this.origItems = this.content().map(this.cellToGridItem);
+        this.gridList = new GridList(this.items, {
+            direction: this.snapping(),
+            lanes: this.snapping() === "horizontal" ? this.snappingRows() : this.snappingColumns()
+        });
+    }
+
+    killGridList() {
+        this.gridList = null;
+        delete this.items;
+        delete this.itemsMap;
+    }
+
+    enter(domNode, element) {
+        super.enter(domNode, element);
+
+        this._scrollBarWidth = Platform.getScrollbarWidth();
+
+        const context = this;
+        this._d3Drag = d3Drag()
+            .subject(function (_d) {
+                const d = context.cellToGridItem(_d);
+                return { x: d.x * context.cellWidth, y: d.y * context.cellHeight };
+            })
+            .on("start", function (_d: any) {
+                if (!context.designMode()) return;
+                d3Event().sourceEvent.stopPropagation();
+                context.initGridList();
+                const d = context.itemsMap[_d.id()];
+                context.dragItem = element.append("div")
+                    .attr("class", "dragging")
+                    .style("transform", function () { return "translate(" + d.x * context.cellWidth + "px, " + d.y * context.cellHeight + "px)"; })
+                    .style("width", function () { return d.w * context.cellWidth - context.gutter() + "px"; })
+                    .style("height", function () { return d.h * context.cellHeight - context.gutter() + "px"; })
+                    ;
+                context.selectionBagClick(_d);
+            })
+            .on("drag", function (_d: any) {
+                if (!context.designMode()) return;
+                const event = d3Event();
+                event.sourceEvent.stopPropagation();
+                const d = context.itemsMap[_d.id()];
+                if (event.x < 0) {
+                    event.x = 0;
+                }
+                if (event.x + d.w * context.cellWidth > context.snappingColumns() * context.cellWidth) {
+                    event.x = context.snappingColumns() * context.cellWidth - d.w * context.cellWidth;
+                }
+                if (event.y < 0) {
+                    event.y = 0;
+                }
+                if (event.y + d.h * context.cellWidth > context.snappingRows() * context.cellWidth) {
+                    event.y = context.snappingRows() * context.cellWidth - d.h * context.cellWidth;
+                }
+                const pos = [Math.max(0, Math.floor((event.x + context.cellWidth / 2) / context.cellWidth)), Math.max(0, Math.floor((event.y + context.cellHeight / 2) / context.cellHeight))];
+                if (d.x !== pos[0] || d.y !== pos[1]) {
+                    if (context.snapping() !== "none") {
+                        context.resetItemsPos();
+                        context.gridList.moveItemToPosition(d, pos);
+                    } else {
+                        d.x = pos[0];
+                        d.y = pos[1];
+                    }
+                    if (_d.gridCol() !== d.x || _d.gridRow() !== d.y) {
+                        context.items.forEach(context.gridItemToCell);
+                        context.updateGrid(false, 100);
+                    }
+                }
+                context.dragItem
+                    .style("transform", function () { return "translate(" + event.x + "px, " + event.y + "px)"; })
+                    .style("width", function () { return d.w * context.cellWidth + "px"; })
+                    .style("height", function () { return d.h * context.cellHeight + "px"; })
+                    ;
+            })
+            .on("end", function () {
+                if (!context.designMode()) return;
+                d3Event().sourceEvent.stopPropagation();
+                context.dragItem.remove();
+                context.dragItem = null;
+                context.killGridList();
+            })
+            ;
+
+        this._d3DragResize = d3Drag()
+            .subject(function (_d) {
+                const d = context.cellToGridItem(_d);
+                return { x: (d.x + d.w - 1) * context.cellWidth, y: (d.y + d.h - 1) * context.cellHeight };
+            })
+            .on("start", function (_d: any) {
+                if (!context.designMode()) return;
+                d3Event().sourceEvent.stopPropagation();
+                context.initGridList();
+                const d = context.itemsMap[_d.id()];
+                context.dragItem = element.append("div")
+                    .attr("class", "resizing")
+                    .style("transform", function () { return "translate(" + d.x * context.cellWidth + "px, " + d.y * context.cellHeight + "px)"; })
+                    .style("width", function () { return d.w * context.cellWidth - context.gutter() + "px"; })
+                    .style("height", function () { return d.h * context.cellHeight - context.gutter() + "px"; })
+                    ;
+                context.dragItemPos = { x: d.x, y: d.y };
+            })
+            .on("drag", function (_d: any) {
+                if (!context.designMode()) return;
+                const event = d3Event();
+                event.sourceEvent.stopPropagation();
+                const d = context.itemsMap[_d.id()];
+                const pos = [Math.max(0, Math.round(event.x / context.cellWidth)), Math.max(0, Math.round(event.y / context.cellHeight))];
+                const size = {
+                    w: Math.max(1, pos[0] - d.x + 1),
+                    h: Math.max(1, pos[1] - d.y + 1)
+                };
+                if (d.w !== size.w || d.h !== size.h) {
+                    if (context.snapping() !== "none") {
+                        context.resetItemsPos();
+                        context.gridList.resizeItem(d, size);
+                    } else {
+                        d.w = size.w;
+                        d.h = size.h;
+                    }
+                    if (_d.gridColSpan() !== d.w || _d.gridRowSpan() !== d.h) {
+                        context.items.forEach(context.gridItemToCell);
+                        context.updateGrid(d.id, 100);
+                    }
+                }
+                context.dragItem
+                    .style("width", function () { return (-d.x + 1) * context.cellWidth + event.x - context.gutter() + "px"; })
+                    .style("height", function () { return (-d.y + 1) * context.cellHeight + event.y - context.gutter() + "px"; })
+                    ;
+            })
+            .on("end", function () {
+                if (!context.designMode()) return;
+                d3Event().sourceEvent.stopPropagation();
+                context.dragItem.remove();
+                context.dragItem = null;
+                context.killGridList();
+            })
+            ;
+    }
+
+    updateGrid(resize, transitionDuration: number = 0, _noRender: boolean = false) {
+        transitionDuration = transitionDuration || 0;
+        const context = this;
+        this.divItems
+            .classed("draggable", this.designMode())
+            .transition().duration(transitionDuration)
+            .style("left", function (d) { return d.gridCol() * context.cellWidth + context.gutter() / 2 + "px"; })
+            .style("top", function (d) { return d.gridRow() * context.cellHeight + context.gutter() / 2 + "px"; })
+            .style("width", function (d) { return d.gridColSpan() * context.cellWidth - context.gutter() + "px"; })
+            .style("height", function (d) { return d.gridRowSpan() * context.cellHeight - context.gutter() + "px"; })
+            .on("end", function (d) {
+                d
+                    .surfaceShadow_default(context.surfaceShadow())
+                    .surfacePadding_default(context.surfacePadding())
+                    .surfaceBorderWidth_default(context.surfaceBorderWidth())
+                    .surfaceBackgroundColor_default(context.surfaceBackgroundColor())
+                    ;
+
+                if (resize === true || resize === d.id()) {
+                    d
+                        .resize()
+                        .lazyRender()
+                        ;
+                }
+            })
+            ;
+    }
+
+    update(domNode, element2) {
+        super.update(domNode, element2);
+
+        this._placeholderElement.style("overflow-x", this.fitTo() === "width" ? "hidden" : null);
+        this._placeholderElement.style("overflow-y", this.fitTo() === "width" ? "scroll" : null);
+        const dimensions = this.getDimensions();
+        const clientWidth = this.width() - (this.fitTo() === "width" ? this._scrollBarWidth : 0);
+        this.cellWidth = clientWidth / dimensions.width;
+        this.cellHeight = this.fitTo() === "all" ? this.height() / dimensions.height : this.cellWidth;
+        if (this.designMode()) {
+            const cellLaneRatio = Math.min(this.width() / this.snappingColumns(), this.height() / this.snappingRows());
+            const laneWidth = Math.floor(cellLaneRatio);
+            this.cellWidth = laneWidth;
+            this.cellHeight = this.cellWidth;
+        }
+
+        //  Grid  ---
+        const context = this;
+        const divItems = element2.selectAll("#" + this.id() + " > .ddCell").data(this.content(), function (d) { return d.id(); });
+        this.divItems = divItems.enter().append("div")
+            .attr("class", "ddCell")
+            .each(function (d) {
+                d.target(this);
+                d.__grid_watch = d.monitor(function (key, newVal, oldVal) {
+                    if (context._renderCount && (key === "snapping" || key.indexOf("grid") === 0) && newVal !== oldVal) {
+                        if (!context.gridList) {
+                            //  API Call  (only needed when not dragging) ---
+                            context.initGridList();
+                            if (context.snapping() !== "none") {
+                                context.gridList.resizeGrid(context.snapping() === "horizontal" ? context.snappingRows() : context.snappingColumns());
+                            }
+                            context.items.forEach(context.gridItemToCell);
+                            context.updateGrid(d.id(), 100);
+                            context.killGridList();
+                        }
+                    }
+                });
+                const element = d3Select(this);
+                element.append("div")
+                    .attr("class", "resizeHandle")
+                    .call(context._d3DragResize)
+                    .append("div")
+                    .attr("class", "resizeHandleDisplay")
+                    ;
+            }).merge(divItems)
+            ;
+        this.divItems.each(function (d) {
+            const element = d3Select(this);
+            if (context.designMode()) {
+                element.call(context._d3Drag);
+            } else {
+                element
+                    .on("mousedown.drag", null)
+                    .on("touchstart.drag", null)
+                    ;
+            }
+        });
+        this.divItems.select(".resizeHandle")
+            .style("display", this.designMode() ? null : "none")
+            ;
+
+        this.updateGrid(true);
+        divItems.exit()
+            .each(function (d) {
+                d.target(null);
+                if (d.__grid_watch) {
+                    d.__grid_watch.remove();
+                }
+            })
+            .remove()
+            ;
+
+        //  Snapping  ---
+        const lanesBackground = element2.selectAll("#" + this.id() + " > .laneBackground").data(this.designMode() ? [""] : []);
+        lanesBackground.enter().insert("div", ":first-child")
+            .attr("class", "laneBackground")
+            .style("left", "1px")
+            .style("top", "1px")
+            .on("click", function () {
+                context.selectionBagClear();
+            })
+            .merge(lanesBackground)
+            .style("width", (this.snappingColumns() * this.cellWidth) + "px")
+            .style("height", (this.snappingRows() * this.cellHeight) + "px")
+            ;
+        lanesBackground.exit()
+            .each(function () {
+                context.selectionBagClear();
+            })
+            .remove()
+            ;
+
+        const lanes = element2.selectAll("#" + this.id() + " > .lane").data(this.designMode() ? [""] : []);
+        lanes.enter().append("div")
+            .attr("class", "lane")
+            .style("left", "1px")
+            .style("top", "1px")
+            ;
+        lanes
+            .style("display", this.showLanes() ? null : "none")
+            .style("width", (this.snappingColumns() * this.cellWidth) + "px")
+            .style("height", (this.snappingRows() * this.cellHeight) + "px")
+            .style("background-image", "linear-gradient(to right, grey 1px, transparent 1px), linear-gradient(to bottom, grey 1px, transparent 1px)")
+            .style("background-size", this.cellWidth + "px " + this.cellHeight + "px")
+            ;
+        lanes.exit()
+            .remove()
+            ;
+    }
+
+    exit(domNode, element) {
+        this.content().forEach(w => w.target(null));
+        super.exit(domNode, element);
+    }
+
+    _createSelectionObject(d) {
+        return {
+            _id: d._id,
+            element: () => {
+                return d._element;
+            },
+            widget: d
+        };
+    }
+
+    selection(_) {
+        if (!arguments.length) return this._selectionBag.get().map(function (d) { return d._id; });
+        this._selectionBag.set(_.map(function (row) {
+            return this._createSelectionObject(row);
+        }, this));
+        return this;
+    }
+
+    selectionBagClear() {
+        if (!this._selectionBag.isEmpty()) {
+            this._selectionBag.clear();
+            this.postSelectionChange();
+        }
+    }
+
+    selectionBagClick(d) {
+        if (d !== null) {
+            const selectionObj = this._createSelectionObject(d);
+            if (d3Event().sourceEvent.ctrlKey) {
+                if (this._selectionBag.isSelected(selectionObj)) {
+                    this._selectionBag.remove(selectionObj);
+                    this.postSelectionChange();
+                } else {
+                    this._selectionBag.append(selectionObj);
+                    this.postSelectionChange();
+                }
+            } else {
+                const selected = this._selectionBag.get();
+                if (selected.length === 1 && selected[0]._id === selectionObj._id) {
+                    this.selectionBagClear();
+                } else {
+                    this._selectionBag.set([selectionObj]);
+                }
+                this.postSelectionChange();
+            }
+        }
+    }
+
+    postSelectionChange() {
+    }
+
+    applyLayout(layoutArr: ICellPosition[]) {
+        this.divItems.each((d, i) => {
+            if (layoutArr[i]) {
+                const [x, y, w, h] = layoutArr[i];
+                d
+                    .gridCol(x)
+                    .gridRow(y)
+                    .gridColSpan(w)
+                    .gridRowSpan(h)
+                    ;
+            }
+        });
+        this.updateGrid(true);
+    }
+
+    vizActivation(elem) {
+    }
+}
+Grid.prototype._class += " layout_Grid";
+
+export interface Grid {
+    designMode(): boolean;
+    designMode(_: boolean): this;
+    showLanes(): boolean;
+    showLanes(_: boolean): this;
+    fitTo(): string;
+    fitTo(_: string): this;
+
+    snapping(): string;
+    snapping(_: string): this;
+    snappingColumns(): number;
+    snappingColumns(_: number): this;
+    snappingRows(): number;
+    snappingRows(_: number): this;
+    snappingColumns_default(): number;
+    snappingColumns_default(_: number): this;
+    snappingRows_default(): number;
+    snappingRows_default(_: number): this;
+
+    gutter(): number;
+    gutter(_: number): this;
+
+    surfaceShadow(): boolean;
+    surfaceShadow(_: boolean): this;
+    surfacePadding(): string;
+    surfacePadding(_: string): this;
+    surfaceBorderWidth(): number;
+    surfaceBorderWidth(_: number): this;
+    surfaceBackgroundColor(): string;
+    surfaceBackgroundColor(_: string): this;
+
+    content(): Cell[];
+    content(_: Cell[]): this;
+}
+
+Grid.prototype.publish("designMode", false, "boolean", "Design Mode", null, { tags: ["Basic"] });
+Grid.prototype.publish("showLanes", true, "boolean", "Show snapping lanes when in design mode", null, { tags: ["Basic"], disable: w => !w.designMode() });
+Grid.prototype.publish("fitTo", "all", "set", "Sizing Strategy", ["all", "width"], { tags: ["Basic"] });
+Grid.prototype.publish("snapping", "vertical", "set", "Snapping Strategy", ["vertical", "horizontal", "none"]);
+Grid.prototype.publish("snappingColumns", 12, "number", "Snapping Columns");
+Grid.prototype.publish("snappingRows", 16, "number", "Snapping Rows");
+
+Grid.prototype.publish("gutter", 6, "number", "Gap Between Widgets", null, { tags: ["Basic"] });
+
+Grid.prototype.publish("surfaceShadow", true, "boolean", "3D Shadow");
+Grid.prototype.publish("surfacePadding", null, "string", "Cell Padding (px)", null, { tags: ["Intermediate"] });
+Grid.prototype.publish("surfaceBorderWidth", 1, "number", "Width (px) of Cell Border", null, { tags: ["Intermediate"] });
+Grid.prototype.publish("surfaceBackgroundColor", null, "html-color", "Surface Background Color", null, { tags: ["Advanced"] });
+
+Grid.prototype.publish("content", [], "widgetArray", "widgets", null, { tags: ["Basic"], render: false });