@hpcc-js/layout 3.5.7 → 3.5.10

package/src/Tabbed.ts

@@ -1,165 +1,165 @@
-import { HTMLWidget, Text, Widget } from "@hpcc-js/common";
-import { select as d3Select } from "d3-selection";
-import { Surface } from "./Surface.ts";
-
-import "../src/Tabbed.css";
-
-export class Tabbed extends HTMLWidget {
-    _tabContainer;
-    _contentContainer;
-
-    constructor() {
-        super();
-
-        this._tag = "div";
-    }
-
-    clearTabs() {
-        this.labels([]);
-        this.widgets([]);
-        return this;
-    }
-
-    addTab(widget, label, isActive?, callback?) {
-        const widgetSize = widget.size();
-        if (widgetSize.width === 0 && widgetSize.height === 0) {
-            widget.size({ width: "100%", height: "100%" });
-        }
-        const labels = this.labels();
-        const widgets = this.widgets();
-        if (isActive) {
-            this.activeTabIdx(this.widgets().length);
-        }
-        labels.push(label);
-        const surface = new Surface().widget(widget ? widget : new Text().text("No widget defined for tab"));
-        widgets.push(surface);
-        this.labels(labels);
-        this.widgets(widgets);
-        if (callback) {
-            callback(surface);
-        }
-        return this;
-    }
-
-    widgetSize(widgetDiv) {
-        const width = this.clientWidth();
-        let height = this.clientHeight();
-
-        const tcBox = this._tabContainer.node().getBoundingClientRect();
-        if (typeof (tcBox.height) !== "undefined") {
-            height -= tcBox.height;
-        }
-        return { width, height };
-    }
-
-    enter(domNode, element) {
-        super.enter(domNode, element);
-        this._tabContainer = element.append("div");
-        this._contentContainer = element.append("div");
-    }
-
-    update(domNode, element) {
-        super.update(domNode, element);
-        const context = this;
-
-        element.style("padding", this.surfacePadding_exists() ? this.surfacePadding() + "px" : null);
-
-        const tabs = this._tabContainer.selectAll(".tab-button.id" + this.id()).data(this.showTabs() ? this.labels() : [], function (d) { return d; });
-        tabs.enter().append("span")
-            .attr("class", "tab-button id" + this.id())
-            .style("cursor", "pointer")
-            .on("click", function (d, idx) {
-                context.click(context.widgets()[idx].widget(), d, idx);
-                context
-                    .activeTabIdx(idx)
-                    .render()
-                    ;
-            }).merge(tabs)
-            .classed("active", function (d, idx) { return context.activeTabIdx() === idx; })
-            .text(function (d) { return d; })
-            ;
-        tabs.exit().remove();
-
-        const content = this._contentContainer.selectAll(".tab-content.id" + this.id()).data(this.widgets(), function (d) { return d.id(); });
-        content.enter().append("div")
-            .attr("class", "tab-content id" + this.id())
-            .each(function (widget, idx) {
-                widget.target(this);
-            }).merge(content)
-            .classed("active", function (d, idx) { return context.activeTabIdx() === idx; })
-            .style("display", function (d, idx) { return context.activeTabIdx() === idx ? "block" : "none"; })
-            .each(function (surface, idx) {
-                surface.visible(context.activeTabIdx() === idx);
-                if (context.activeTabIdx() === idx) {
-                    const wSize = context.widgetSize(d3Select(this));
-                    surface
-                        .surfaceBorderWidth(context.showTabs() ? null : 0)
-                        .surfacePadding(context.showTabs() ? null : 0)
-                        .resize(wSize)
-                        ;
-                }
-            })
-            ;
-        content.exit()
-            .each(function (widget, idx) {
-                widget
-                    .target(null)
-                    ;
-            })
-            .remove();
-
-        switch (this.tabLocation()) {
-            case "bottom":
-                this._tabContainer
-                    .attr("class", "on_bottom")
-                    .style("top", (this._contentContainer.node().offsetHeight + this.surfacePadding()) + "px")
-                    .style("position", "absolute")
-                    ;
-                this._contentContainer
-                    .style("top", this.surfacePadding_exists() ? this.surfacePadding() + "px" : null)
-                    .style("position", "absolute")
-                    ;
-                break;
-            default:
-                this._tabContainer
-                    .attr("class", "on_top")
-                    .style("top", null)
-                    .style("position", "relative")
-                    ;
-                this._contentContainer
-                    .style("top", (this._tabContainer.node().offsetHeight + this.surfacePadding()) + "px")
-                    .style("position", "absolute")
-                    ;
-                break;
-        }
-    }
-
-    click(widget, column, idx) {
-    }
-}
-Tabbed.prototype._class += " layout_Tabbed";
-
-export interface Tabbed {
-    showTabs(): boolean;
-    showTabs(_: boolean): this;
-    surfacePadding(): number;
-    surfacePadding(_: number): this;
-    surfacePadding_exists(): boolean;
-    activeTabIdx(): number;
-    activeTabIdx(_: number): this;
-
-    labels(): string[];
-    labels(_: string[]): this;
-    tabLocation(): "top" | "bottom";
-    tabLocation(_: "top" | "bottom"): this;
-    widgets(): any[];
-    widgets(_: any[]): this;
-}
-
-Tabbed.prototype.publish("showTabs", true, "boolean", "Show Tabs", null, {});
-Tabbed.prototype.publish("surfacePadding", 4, "number", "Padding");
-Tabbed.prototype.publish("activeTabIdx", 0, "number", "Index of active tab", null, {});
-
-Tabbed.prototype.publish("labels", [], "array", "Array of tab labels sharing an index with ", null, { tags: ["Private"] });
-Tabbed.prototype.publish("tabLocation", "top", "set", "Position the tabs at the bottom of the widget", ["top", "bottom"], { tags: ["Private"] });
-Tabbed.prototype.publish("widgets", [], "widgetArray", "widgets", null, { tags: ["Private"] });
+import { HTMLWidget, Text, Widget } from "@hpcc-js/common";
+import { select as d3Select } from "d3-selection";
+import { Surface } from "./Surface.ts";
+
+import "../src/Tabbed.css";
+
+export class Tabbed extends HTMLWidget {
+    _tabContainer;
+    _contentContainer;
+
+    constructor() {
+        super();
+
+        this._tag = "div";
+    }
+
+    clearTabs() {
+        this.labels([]);
+        this.widgets([]);
+        return this;
+    }
+
+    addTab(widget, label, isActive?, callback?) {
+        const widgetSize = widget.size();
+        if (widgetSize.width === 0 && widgetSize.height === 0) {
+            widget.size({ width: "100%", height: "100%" });
+        }
+        const labels = this.labels();
+        const widgets = this.widgets();
+        if (isActive) {
+            this.activeTabIdx(this.widgets().length);
+        }
+        labels.push(label);
+        const surface = new Surface().widget(widget ? widget : new Text().text("No widget defined for tab"));
+        widgets.push(surface);
+        this.labels(labels);
+        this.widgets(widgets);
+        if (callback) {
+            callback(surface);
+        }
+        return this;
+    }
+
+    widgetSize(widgetDiv) {
+        const width = this.clientWidth();
+        let height = this.clientHeight();
+
+        const tcBox = this._tabContainer.node().getBoundingClientRect();
+        if (typeof (tcBox.height) !== "undefined") {
+            height -= tcBox.height;
+        }
+        return { width, height };
+    }
+
+    enter(domNode, element) {
+        super.enter(domNode, element);
+        this._tabContainer = element.append("div");
+        this._contentContainer = element.append("div");
+    }
+
+    update(domNode, element) {
+        super.update(domNode, element);
+        const context = this;
+
+        element.style("padding", this.surfacePadding_exists() ? this.surfacePadding() + "px" : null);
+
+        const tabs = this._tabContainer.selectAll(".tab-button.id" + this.id()).data(this.showTabs() ? this.labels() : [], function (d) { return d; });
+        tabs.enter().append("span")
+            .attr("class", "tab-button id" + this.id())
+            .style("cursor", "pointer")
+            .on("click", function (d, idx) {
+                context.click(context.widgets()[idx].widget(), d, idx);
+                context
+                    .activeTabIdx(idx)
+                    .render()
+                    ;
+            }).merge(tabs)
+            .classed("active", function (d, idx) { return context.activeTabIdx() === idx; })
+            .text(function (d) { return d; })
+            ;
+        tabs.exit().remove();
+
+        const content = this._contentContainer.selectAll(".tab-content.id" + this.id()).data(this.widgets(), function (d) { return d.id(); });
+        content.enter().append("div")
+            .attr("class", "tab-content id" + this.id())
+            .each(function (widget, idx) {
+                widget.target(this);
+            }).merge(content)
+            .classed("active", function (d, idx) { return context.activeTabIdx() === idx; })
+            .style("display", function (d, idx) { return context.activeTabIdx() === idx ? "block" : "none"; })
+            .each(function (surface, idx) {
+                surface.visible(context.activeTabIdx() === idx);
+                if (context.activeTabIdx() === idx) {
+                    const wSize = context.widgetSize(d3Select(this));
+                    surface
+                        .surfaceBorderWidth(context.showTabs() ? null : 0)
+                        .surfacePadding(context.showTabs() ? null : 0)
+                        .resize(wSize)
+                        ;
+                }
+            })
+            ;
+        content.exit()
+            .each(function (widget, idx) {
+                widget
+                    .target(null)
+                    ;
+            })
+            .remove();
+
+        switch (this.tabLocation()) {
+            case "bottom":
+                this._tabContainer
+                    .attr("class", "on_bottom")
+                    .style("top", (this._contentContainer.node().offsetHeight + this.surfacePadding()) + "px")
+                    .style("position", "absolute")
+                    ;
+                this._contentContainer
+                    .style("top", this.surfacePadding_exists() ? this.surfacePadding() + "px" : null)
+                    .style("position", "absolute")
+                    ;
+                break;
+            default:
+                this._tabContainer
+                    .attr("class", "on_top")
+                    .style("top", null)
+                    .style("position", "relative")
+                    ;
+                this._contentContainer
+                    .style("top", (this._tabContainer.node().offsetHeight + this.surfacePadding()) + "px")
+                    .style("position", "absolute")
+                    ;
+                break;
+        }
+    }
+
+    click(widget, column, idx) {
+    }
+}
+Tabbed.prototype._class += " layout_Tabbed";
+
+export interface Tabbed {
+    showTabs(): boolean;
+    showTabs(_: boolean): this;
+    surfacePadding(): number;
+    surfacePadding(_: number): this;
+    surfacePadding_exists(): boolean;
+    activeTabIdx(): number;
+    activeTabIdx(_: number): this;
+
+    labels(): string[];
+    labels(_: string[]): this;
+    tabLocation(): "top" | "bottom";
+    tabLocation(_: "top" | "bottom"): this;
+    widgets(): any[];
+    widgets(_: any[]): this;
+}
+
+Tabbed.prototype.publish("showTabs", true, "boolean", "Show Tabs", null, {});
+Tabbed.prototype.publish("surfacePadding", 4, "number", "Padding");
+Tabbed.prototype.publish("activeTabIdx", 0, "number", "Index of active tab", null, {});
+
+Tabbed.prototype.publish("labels", [], "array", "Array of tab labels sharing an index with ", null, { tags: ["Private"] });
+Tabbed.prototype.publish("tabLocation", "top", "set", "Position the tabs at the bottom of the widget", ["top", "bottom"], { tags: ["Private"] });
+Tabbed.prototype.publish("widgets", [], "widgetArray", "widgets", null, { tags: ["Private"] });

package/src/Toolbar.css

@@ -1,34 +1,34 @@
-.layout_Toolbar {
-    height: 100%;
-    background-color: #dddddd;
-    white-space: nowrap;
-    overflow: hidden;
-}
-
-.layout_Toolbar .toolbar-title {
-    display: inline-block;
-    position: relative;
-    top: 50%;
-    transform: translateY(-50%);
-    -ms-transform: translateY(-50%);
-
-    margin-left: 4px;
-    font-weight: bold;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-}
-
-.layout_Toolbar .toolbar-title span {}
-
-.layout_Toolbar .toolbar-child {
-    position: relative;
-    top: 50%;
-    transform: translateY(-50%);
-    -ms-transform: translateY(-50%);
-
-    float: right;
-    margin-left: 4px;
-    margin-right: 4px;
-    line-height: 16px;
+.layout_Toolbar {
+    height: 100%;
+    background-color: #dddddd;
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+.layout_Toolbar .toolbar-title {
+    display: inline-block;
+    position: relative;
+    top: 50%;
+    transform: translateY(-50%);
+    -ms-transform: translateY(-50%);
+
+    margin-left: 4px;
+    font-weight: bold;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+.layout_Toolbar .toolbar-title span {}
+
+.layout_Toolbar .toolbar-child {
+    position: relative;
+    top: 50%;
+    transform: translateY(-50%);
+    -ms-transform: translateY(-50%);
+
+    float: right;
+    margin-left: 4px;
+    margin-right: 4px;
+    line-height: 16px;
 }

package/src/Toolbar.ts

@@ -1,127 +1,127 @@
-import { HTMLWidget, Widget } from "@hpcc-js/common";
-import { select as d3Select } from "d3-selection";
-
-import "../src/Toolbar.css";
-
-export class Toolbar extends HTMLWidget {
-
-    constructor() {
-        super();
-        this._tag = "div";
-    }
-
-    enter(domNode, element) {
-        super.enter(domNode, element);
-    }
-
-    update(domNode, element) {
-        super.update(domNode, element);
-        const context = this;
-
-        element
-            .attr("title", context.title())
-            .style("background-color", this.backgroundColor())
-            ;
-
-        const title = element.selectAll("div.toolbar-title")
-            .data(this.title() ? [this.title()] : []);
-        title.enter().append("div")
-            .classed("toolbar-title", true)
-            .append("span")
-            ;
-        title.selectAll("div.toolbar-title > span")
-            .style("font-size", this.fontSize_exists() ? this.fontSize() + "px" : null)
-            .style("color", this.fontColor_exists() ? this.fontColor() : null)
-            .style("font-family", this.fontFamily_exists() ? this.fontFamily() : null)
-            .style("font-weight", this.fontBold_exists() ? (this.fontBold() ? "bold" : "normal") : null)
-            .style("background-color", this.backgroundColor_exists() ? this.backgroundColor() : null)
-            .text(context.title())
-            ;
-        title.exit().remove();
-
-        const childWidgets = element.selectAll("div.toolbar-child")
-            .data(this.widgets() !== null ? this.widgets() : [], function (d) { return d.id(); });
-
-        childWidgets.enter().insert("div", "div.toolbar-title")
-            .each(function (d, i) {
-                const widgetClass = context.widgetClasses()[i] ? context.widgetClasses()[i] + " toolbar-child" : "toolbar-child";
-                d3Select(this).classed(widgetClass, true);
-                d.target(this);
-            });
-        childWidgets.exit().each(function (d) {
-            d.target(null);
-        }).remove();
-        childWidgets.order();
-    }
-
-    render(callback?: (w: Widget) => void): this {
-        const context = this;
-        return super.render(function (w) {
-            const toolbarBBox = context.element().node().getBoundingClientRect();
-            let minX = toolbarBBox.left + toolbarBBox.width;
-            context.element().selectAll("div.toolbar-child")
-                .each(function (d, i) {
-                    const childBBox = this.getBoundingClientRect();
-                    if (minX > childBBox.left)
-                        minX = childBBox.left;
-                })
-                ;
-            context.element().select(".toolbar-title")
-                .style("width", (minX - toolbarBBox.left - 4) + "px")
-                ;
-            if (callback) {
-                callback(w);
-            }
-        });
-    }
-
-    exit(domNode, element) {
-        this.widgets().forEach(function (w) {
-            w.target(null);
-        });
-        super.exit(domNode, element);
-    }
-}
-Toolbar.prototype._class += " layout_Toolbar";
-
-export interface Toolbar {
-    title(): string;
-    title(_: string): this;
-
-    fontSize(): number;
-    fontSize(_: number): this;
-    fontSize_exists(): boolean;
-    fontColor(): string;
-    fontColor(_: string): this;
-    fontColor_exists(): boolean;
-    fontFamily(): string;
-    fontFamily(_: string): this;
-    fontFamily_exists(): boolean;
-    fontBold(): boolean;
-    fontBold(_: boolean): this;
-    fontBold_exists(): boolean;
-    backgroundColor(): string;
-    backgroundColor(_: string): this;
-    backgroundColor_exists(): boolean;
-
-    responsive(): boolean;
-    responsive(_: boolean): this;
-
-    widgets(): any[];
-    widgets(_: any[]): this;
-    widgetClasses(): string[];
-    widgetClasses(_: string[]): this;
-}
-
-Toolbar.prototype.publish("title", "", "string", "Title", null, { tags: ["Intermediate"] });
-
-Toolbar.prototype.publish("fontSize", null, "number", "Title Font Size (px)", null, { tags: ["Advanced"], optional: true });
-Toolbar.prototype.publish("fontColor", null, "html-color", "Title Font Color", null, { tags: ["Advanced"], optional: true });
-Toolbar.prototype.publish("fontFamily", null, "string", "Title Font Family", null, { tags: ["Advanced"], optional: true });
-Toolbar.prototype.publish("fontBold", true, "boolean", "Enable Bold Title Font", null, { tags: ["Advanced"], optional: true });
-Toolbar.prototype.publish("backgroundColor", null, "html-color", "Background Color", null, { tags: ["Intermediate"], optional: true });
-
-Toolbar.prototype.publish("responsive", true, "boolean", "Adapts to pixel width", null, { tags: ["Basic"] });
-
-Toolbar.prototype.publish("widgets", [], "widgetArray", "Child widgets of the toolbar", null, { tags: ["Basic"] });
-Toolbar.prototype.publish("widgetClasses", [], "array", "Array of Html Element classes to be assigned to the child widgets (shares index with widgets param)", null, { tags: ["Basic"] });
+import { HTMLWidget, Widget } from "@hpcc-js/common";
+import { select as d3Select } from "d3-selection";
+
+import "../src/Toolbar.css";
+
+export class Toolbar extends HTMLWidget {
+
+    constructor() {
+        super();
+        this._tag = "div";
+    }
+
+    enter(domNode, element) {
+        super.enter(domNode, element);
+    }
+
+    update(domNode, element) {
+        super.update(domNode, element);
+        const context = this;
+
+        element
+            .attr("title", context.title())
+            .style("background-color", this.backgroundColor())
+            ;
+
+        const title = element.selectAll("div.toolbar-title")
+            .data(this.title() ? [this.title()] : []);
+        title.enter().append("div")
+            .classed("toolbar-title", true)
+            .append("span")
+            ;
+        title.selectAll("div.toolbar-title > span")
+            .style("font-size", this.fontSize_exists() ? this.fontSize() + "px" : null)
+            .style("color", this.fontColor_exists() ? this.fontColor() : null)
+            .style("font-family", this.fontFamily_exists() ? this.fontFamily() : null)
+            .style("font-weight", this.fontBold_exists() ? (this.fontBold() ? "bold" : "normal") : null)
+            .style("background-color", this.backgroundColor_exists() ? this.backgroundColor() : null)
+            .text(context.title())
+            ;
+        title.exit().remove();
+
+        const childWidgets = element.selectAll("div.toolbar-child")
+            .data(this.widgets() !== null ? this.widgets() : [], function (d) { return d.id(); });
+
+        childWidgets.enter().insert("div", "div.toolbar-title")
+            .each(function (d, i) {
+                const widgetClass = context.widgetClasses()[i] ? context.widgetClasses()[i] + " toolbar-child" : "toolbar-child";
+                d3Select(this).classed(widgetClass, true);
+                d.target(this);
+            });
+        childWidgets.exit().each(function (d) {
+            d.target(null);
+        }).remove();
+        childWidgets.order();
+    }
+
+    render(callback?: (w: Widget) => void): this {
+        const context = this;
+        return super.render(function (w) {
+            const toolbarBBox = context.element().node().getBoundingClientRect();
+            let minX = toolbarBBox.left + toolbarBBox.width;
+            context.element().selectAll("div.toolbar-child")
+                .each(function (d, i) {
+                    const childBBox = this.getBoundingClientRect();
+                    if (minX > childBBox.left)
+                        minX = childBBox.left;
+                })
+                ;
+            context.element().select(".toolbar-title")
+                .style("width", (minX - toolbarBBox.left - 4) + "px")
+                ;
+            if (callback) {
+                callback(w);
+            }
+        });
+    }
+
+    exit(domNode, element) {
+        this.widgets().forEach(function (w) {
+            w.target(null);
+        });
+        super.exit(domNode, element);
+    }
+}
+Toolbar.prototype._class += " layout_Toolbar";
+
+export interface Toolbar {
+    title(): string;
+    title(_: string): this;
+
+    fontSize(): number;
+    fontSize(_: number): this;
+    fontSize_exists(): boolean;
+    fontColor(): string;
+    fontColor(_: string): this;
+    fontColor_exists(): boolean;
+    fontFamily(): string;
+    fontFamily(_: string): this;
+    fontFamily_exists(): boolean;
+    fontBold(): boolean;
+    fontBold(_: boolean): this;
+    fontBold_exists(): boolean;
+    backgroundColor(): string;
+    backgroundColor(_: string): this;
+    backgroundColor_exists(): boolean;
+
+    responsive(): boolean;
+    responsive(_: boolean): this;
+
+    widgets(): any[];
+    widgets(_: any[]): this;
+    widgetClasses(): string[];
+    widgetClasses(_: string[]): this;
+}
+
+Toolbar.prototype.publish("title", "", "string", "Title", null, { tags: ["Intermediate"] });
+
+Toolbar.prototype.publish("fontSize", null, "number", "Title Font Size (px)", null, { tags: ["Advanced"], optional: true });
+Toolbar.prototype.publish("fontColor", null, "html-color", "Title Font Color", null, { tags: ["Advanced"], optional: true });
+Toolbar.prototype.publish("fontFamily", null, "string", "Title Font Family", null, { tags: ["Advanced"], optional: true });
+Toolbar.prototype.publish("fontBold", true, "boolean", "Enable Bold Title Font", null, { tags: ["Advanced"], optional: true });
+Toolbar.prototype.publish("backgroundColor", null, "html-color", "Background Color", null, { tags: ["Intermediate"], optional: true });
+
+Toolbar.prototype.publish("responsive", true, "boolean", "Adapts to pixel width", null, { tags: ["Basic"] });
+
+Toolbar.prototype.publish("widgets", [], "widgetArray", "Child widgets of the toolbar", null, { tags: ["Basic"] });
+Toolbar.prototype.publish("widgetClasses", [], "array", "Array of Html Element classes to be assigned to the child widgets (shares index with widgets param)", null, { tags: ["Basic"] });