@hpcc-js/common 2.73.3 → 2.73.5

package/src/EntityRect.ts

@@ -1,236 +1,236 @@
-import { local as d3Local, select as d3Select } from "d3-selection";
-import { Entity } from "./Entity";
-import { HTMLWidget } from "./HTMLWidget";
-import { publish } from "./PropertyExt";
-import * as Utility from "./Utility";
-import { InputField } from "./Widget";
-
-import "../src/EntityRect.css";
-
-export class EntityRect extends Entity {
-    protected _element_textbox;
-    constructor() {
-        super();
-    }
-    enter(domNode, element) {
-        super.enter(domNode, element);
-    }
-    update(domNode, element) {
-        this._desc_widget.text("");
-        super.update(domNode, element);
-    }
-    render(callback?: (w: EntityRect) => void) {
-        return super.render((w: EntityRect) => {
-            const icon_bbox = w.icon() === "" ? { width: 0, height: 0 } : this._icon_widget.getBBox(true);
-            const title_bbox = this._title_widget.getBBox(true);
-            const annotations_bbox = this.getAnnotationsBBox();
-
-            let width = this.fixedWidth();
-            if (!width) {
-                width = icon_bbox.width + title_bbox.width + annotations_bbox.width + this.padding() * 4;
-            }
-
-            let height = this.fixedHeight();
-            if (!height) {
-                height = Math.max(icon_bbox.height, title_bbox.height, annotations_bbox.height) + this.padding() * 2;
-            }
-
-            this._background_widget
-                .width(width)
-                .height(height)
-                .render()
-                ;
-
-            this._icon_widget.move({
-                x: -(width / 2) + (icon_bbox.width),
-                y: 0
-            });
-
-            this.moveAnnotations(width / 2, -annotations_bbox.height / 2);
-            const iconWidth = icon_bbox.width > 0 ? icon_bbox.width + this.padding() : 0;
-            const titleX = -(width / 2) + iconWidth + this.padding();
-            const annoWidth = this.padding() / 2 + annotations_bbox.width + this.padding();
-            const titleW = width - iconWidth - annoWidth;
-
-            this._title_widget
-                .move({
-                    x: titleX,
-                    y: 0
-                })
-                .anchor("start")
-                .width(titleW)
-                .render()
-                ;
-
-            if (callback) {
-                callback(w);
-            }
-        });
-    }
-}
-EntityRect.prototype._class += " common_EntityRect";
-
-export interface EntityRect {
-    fixedWidth(): number;
-    fixedWidth(_: number): this;
-    fixedHeight(): number;
-    fixedHeight(_: number): this;
-}
-
-EntityRect.prototype.publish("fixedWidth", null, "number", "fixedWidth");
-EntityRect.prototype.publish("fixedHeight", null, "number", "fixedHeight");
-
-export class EntityRectList extends HTMLWidget {
-    static __inputs: InputField[] = [{
-        id: "borderColor",
-        type: "string"
-    }, {
-        id: "icon",
-        type: "string"
-    }, {
-        id: "iconColor",
-        type: "string"
-    }, {
-        id: "title",
-        type: "string"
-    }];
-
-    @publish(64, "number", "fixedHeight")
-    fixedHeight: publish<this, number>;
-    @publish("#f8f8f8", "string", "Default Background Color", null, { inputType: "html-color" })
-    backgroundColor: publish<this, string>;
-    @publish(null, "set", "Background Color Column", function () { return this.columns(); }, { optional: true })
-    backgroundColorColumn: publish<this, string>;
-    @publish("black", "string", "Default Border Color", null, { inputType: "html-color" })
-    borderColor: publish<this, string>;
-    @publish(null, "set", "Border Color Column", function () { return this.columns(); }, { optional: true })
-    borderColorColumn: publish<this, string>;
-    @publish("", "string", "Icon")
-    icon: publish<this, string>;
-    @publish(null, "set", "Icon Column", function () { return this.columns(); }, { optional: true })
-    iconColumn: publish<this, string>;
-    @publish("red", "string", "Default Icon Color", null, { inputType: "html-color" })
-    iconColor: publish<this, string>;
-    @publish(null, "set", "Icon Color Column ", function () { return this.columns(); }, { optional: true })
-    iconColorColumn: publish<this, string>;
-    @publish(null, "set", "Title Column", function () { return this.columns(); }, { optional: true })
-    titleColumn: publish<this, string>;
-    @publish("black", "string", "Default Title Color", null, { inputType: "html-color" })
-    titleColor: publish<this, string>;
-    @publish(null, "set", "Title Color Column ", function () { return this.columns(); }, { optional: true })
-    titleColorColumn: publish<this, string>;
-    @publish(null, "set", "Description Column", function () { return this.columns(); }, { optional: true })
-    descriptionColumn: publish<this, string>;
-    @publish("black", "string", "Default Description Color", null, { inputType: "html-color" })
-    descriptionColor: publish<this, string>;
-    @publish(null, "set", "Description Color Column ", function () { return this.columns(); }, { optional: true })
-    descriptionColorColumn: publish<this, string>;
-
-    private _enityRectLocal = d3Local<EntityRect>();
-
-    constructor() {
-        super();
-        Utility.SimpleSelectionMixin.call(this, true);
-    }
-
-    entityRectData() {
-        const columns = this.columns();
-        const idxColumns = [
-            "backgroundColor",
-            "borderColor",
-            "icon",
-            "iconColor",
-            "title",
-            "titleColor",
-            "description",
-            "descriptionColor"
-        ];
-        const idxs = idxColumns.map(idxColumn => columns.indexOf(this[`${idxColumn}Column`]()));
-        return this.data().map(row => {
-            const retVal = {
-                origRow: row
-            };
-            for (let i = 0; i < idxColumns.length; ++i) {
-                retVal[idxColumns[i]] = idxs[i] >= 0 ? row[idxs[i]] : typeof this[`${idxColumns[i]}`] === "function" ? this[`${idxColumns[i]}`]() : "";
-            }
-            return retVal;
-        }, this);
-    }
-
-    enter(domNode, element) {
-        super.enter(domNode, element);
-        d3Select(domNode.parentNode)
-            .style("overflow-x", "hidden")
-            .style("overflow-y", "scroll")
-            ;
-        this._selection.widgetElement(element);
-    }
-
-    update(domNode, element) {
-        super.update(domNode, element);
-        const context = this;
-
-        const margin = { left: 8, top: 8, right: 8, bottom: 8 };
-        const width = this.width() - margin.left - margin.right - 20; //  -20 for VScroll (could do better)
-        const height = this.fixedHeight() - margin.top - margin.bottom;
-
-        const svg = element.selectAll("svg").data(this.entityRectData());
-        svg.enter().append("svg")
-            .attr("class", "entityRectItem")
-            .call(this._selection.enter.bind(this._selection))
-            .on("click", function (d) {
-                context.click(context.rowToObj(d.origRow), context.titleColumn(), context._selection.selected(this));
-            })
-            .on("dblclick", function (d) {
-                context.dblclick(context.rowToObj(d.origRow), context.titleColumn(), context._selection.selected(this));
-            })
-            .each(function () {
-                const entityRect = new EntityRect()
-                    .target(this)
-                    ;
-                context._enityRectLocal.set(this, entityRect);
-            })
-            .merge(svg)
-            .style("border-color", d => d.borderColor)
-            .each(function (d) {
-                context._enityRectLocal.get(this)
-                    .pos({ x: width / 2, y: height / 2 })
-                    .resize({ width, height })
-                    .fixedWidth(width)
-                    .fixedHeight(height)
-                    .backgroundShape("rect")
-                    .backgroundColorFill(d.backgroundColor)
-                    .backgroundColorStroke("none")
-                    .icon(d.icon)
-                    .iconColor(d.iconColor)
-                    .iconDiameter(height / 2.6666)
-                    .iconPaddingPercent(0)
-                    .title(d.title)
-                    .titleFontSize(height / 2.6666)
-                    .titleColor(d.titleColor)
-                    .description(d.description)
-                    .descriptionColor(d.descriptionColor)
-                    .render()
-                    ;
-            })
-            ;
-        svg.exit().remove();
-    }
-
-    exit(domNode, element) {
-        super.exit(domNode, element);
-    }
-
-    //  Events ---
-    click(row, column, selected) {
-        // console.log("Click:  " + JSON.stringify(row) + ", " + column + "," + selected);
-    }
-
-    dblclick(row, column, selected) {
-        // console.log("Double click:  " + JSON.stringify(row) + ", " + column + "," + selected);
-    }
-
-    //  SimpleSelectionMixin
-    _selection;
-}
-EntityRectList.prototype._class += " common_EntityRectList";
+import { local as d3Local, select as d3Select } from "d3-selection";
+import { Entity } from "./Entity";
+import { HTMLWidget } from "./HTMLWidget";
+import { publish } from "./PropertyExt";
+import * as Utility from "./Utility";
+import { InputField } from "./Widget";
+
+import "../src/EntityRect.css";
+
+export class EntityRect extends Entity {
+    protected _element_textbox;
+    constructor() {
+        super();
+    }
+    enter(domNode, element) {
+        super.enter(domNode, element);
+    }
+    update(domNode, element) {
+        this._desc_widget.text("");
+        super.update(domNode, element);
+    }
+    render(callback?: (w: EntityRect) => void) {
+        return super.render((w: EntityRect) => {
+            const icon_bbox = w.icon() === "" ? { width: 0, height: 0 } : this._icon_widget.getBBox(true);
+            const title_bbox = this._title_widget.getBBox(true);
+            const annotations_bbox = this.getAnnotationsBBox();
+
+            let width = this.fixedWidth();
+            if (!width) {
+                width = icon_bbox.width + title_bbox.width + annotations_bbox.width + this.padding() * 4;
+            }
+
+            let height = this.fixedHeight();
+            if (!height) {
+                height = Math.max(icon_bbox.height, title_bbox.height, annotations_bbox.height) + this.padding() * 2;
+            }
+
+            this._background_widget
+                .width(width)
+                .height(height)
+                .render()
+                ;
+
+            this._icon_widget.move({
+                x: -(width / 2) + (icon_bbox.width),
+                y: 0
+            });
+
+            this.moveAnnotations(width / 2, -annotations_bbox.height / 2);
+            const iconWidth = icon_bbox.width > 0 ? icon_bbox.width + this.padding() : 0;
+            const titleX = -(width / 2) + iconWidth + this.padding();
+            const annoWidth = this.padding() / 2 + annotations_bbox.width + this.padding();
+            const titleW = width - iconWidth - annoWidth;
+
+            this._title_widget
+                .move({
+                    x: titleX,
+                    y: 0
+                })
+                .anchor("start")
+                .width(titleW)
+                .render()
+                ;
+
+            if (callback) {
+                callback(w);
+            }
+        });
+    }
+}
+EntityRect.prototype._class += " common_EntityRect";
+
+export interface EntityRect {
+    fixedWidth(): number;
+    fixedWidth(_: number): this;
+    fixedHeight(): number;
+    fixedHeight(_: number): this;
+}
+
+EntityRect.prototype.publish("fixedWidth", null, "number", "fixedWidth");
+EntityRect.prototype.publish("fixedHeight", null, "number", "fixedHeight");
+
+export class EntityRectList extends HTMLWidget {
+    static __inputs: InputField[] = [{
+        id: "borderColor",
+        type: "string"
+    }, {
+        id: "icon",
+        type: "string"
+    }, {
+        id: "iconColor",
+        type: "string"
+    }, {
+        id: "title",
+        type: "string"
+    }];
+
+    @publish(64, "number", "fixedHeight")
+    fixedHeight: publish<this, number>;
+    @publish("#f8f8f8", "string", "Default Background Color", null, { inputType: "html-color" })
+    backgroundColor: publish<this, string>;
+    @publish(null, "set", "Background Color Column", function () { return this.columns(); }, { optional: true })
+    backgroundColorColumn: publish<this, string>;
+    @publish("black", "string", "Default Border Color", null, { inputType: "html-color" })
+    borderColor: publish<this, string>;
+    @publish(null, "set", "Border Color Column", function () { return this.columns(); }, { optional: true })
+    borderColorColumn: publish<this, string>;
+    @publish("", "string", "Icon")
+    icon: publish<this, string>;
+    @publish(null, "set", "Icon Column", function () { return this.columns(); }, { optional: true })
+    iconColumn: publish<this, string>;
+    @publish("red", "string", "Default Icon Color", null, { inputType: "html-color" })
+    iconColor: publish<this, string>;
+    @publish(null, "set", "Icon Color Column ", function () { return this.columns(); }, { optional: true })
+    iconColorColumn: publish<this, string>;
+    @publish(null, "set", "Title Column", function () { return this.columns(); }, { optional: true })
+    titleColumn: publish<this, string>;
+    @publish("black", "string", "Default Title Color", null, { inputType: "html-color" })
+    titleColor: publish<this, string>;
+    @publish(null, "set", "Title Color Column ", function () { return this.columns(); }, { optional: true })
+    titleColorColumn: publish<this, string>;
+    @publish(null, "set", "Description Column", function () { return this.columns(); }, { optional: true })
+    descriptionColumn: publish<this, string>;
+    @publish("black", "string", "Default Description Color", null, { inputType: "html-color" })
+    descriptionColor: publish<this, string>;
+    @publish(null, "set", "Description Color Column ", function () { return this.columns(); }, { optional: true })
+    descriptionColorColumn: publish<this, string>;
+
+    private _enityRectLocal = d3Local<EntityRect>();
+
+    constructor() {
+        super();
+        Utility.SimpleSelectionMixin.call(this, true);
+    }
+
+    entityRectData() {
+        const columns = this.columns();
+        const idxColumns = [
+            "backgroundColor",
+            "borderColor",
+            "icon",
+            "iconColor",
+            "title",
+            "titleColor",
+            "description",
+            "descriptionColor"
+        ];
+        const idxs = idxColumns.map(idxColumn => columns.indexOf(this[`${idxColumn}Column`]()));
+        return this.data().map(row => {
+            const retVal = {
+                origRow: row
+            };
+            for (let i = 0; i < idxColumns.length; ++i) {
+                retVal[idxColumns[i]] = idxs[i] >= 0 ? row[idxs[i]] : typeof this[`${idxColumns[i]}`] === "function" ? this[`${idxColumns[i]}`]() : "";
+            }
+            return retVal;
+        }, this);
+    }
+
+    enter(domNode, element) {
+        super.enter(domNode, element);
+        d3Select(domNode.parentNode)
+            .style("overflow-x", "hidden")
+            .style("overflow-y", "scroll")
+            ;
+        this._selection.widgetElement(element);
+    }
+
+    update(domNode, element) {
+        super.update(domNode, element);
+        const context = this;
+
+        const margin = { left: 8, top: 8, right: 8, bottom: 8 };
+        const width = this.width() - margin.left - margin.right - 20; //  -20 for VScroll (could do better)
+        const height = this.fixedHeight() - margin.top - margin.bottom;
+
+        const svg = element.selectAll("svg").data(this.entityRectData());
+        svg.enter().append("svg")
+            .attr("class", "entityRectItem")
+            .call(this._selection.enter.bind(this._selection))
+            .on("click", function (d) {
+                context.click(context.rowToObj(d.origRow), context.titleColumn(), context._selection.selected(this));
+            })
+            .on("dblclick", function (d) {
+                context.dblclick(context.rowToObj(d.origRow), context.titleColumn(), context._selection.selected(this));
+            })
+            .each(function () {
+                const entityRect = new EntityRect()
+                    .target(this)
+                    ;
+                context._enityRectLocal.set(this, entityRect);
+            })
+            .merge(svg)
+            .style("border-color", d => d.borderColor)
+            .each(function (d) {
+                context._enityRectLocal.get(this)
+                    .pos({ x: width / 2, y: height / 2 })
+                    .resize({ width, height })
+                    .fixedWidth(width)
+                    .fixedHeight(height)
+                    .backgroundShape("rect")
+                    .backgroundColorFill(d.backgroundColor)
+                    .backgroundColorStroke("none")
+                    .icon(d.icon)
+                    .iconColor(d.iconColor)
+                    .iconDiameter(height / 2.6666)
+                    .iconPaddingPercent(0)
+                    .title(d.title)
+                    .titleFontSize(height / 2.6666)
+                    .titleColor(d.titleColor)
+                    .description(d.description)
+                    .descriptionColor(d.descriptionColor)
+                    .render()
+                    ;
+            })
+            ;
+        svg.exit().remove();
+    }
+
+    exit(domNode, element) {
+        super.exit(domNode, element);
+    }
+
+    //  Events ---
+    click(row, column, selected) {
+        // console.log("Click:  " + JSON.stringify(row) + ", " + column + "," + selected);
+    }
+
+    dblclick(row, column, selected) {
+        // console.log("Double click:  " + JSON.stringify(row) + ", " + column + "," + selected);
+    }
+
+    //  SimpleSelectionMixin
+    _selection;
+}
+EntityRectList.prototype._class += " common_EntityRectList";

package/src/EntityVertex.ts

@@ -1,86 +1,86 @@
-import { Entity } from "./Entity";
-import { TextBox } from "./TextBox";
-
-export class EntityVertex extends Entity {
-    protected _textbox_widget: TextBox;
-    protected _element_textbox;
-    constructor() {
-        super();
-        this._textbox_widget = new TextBox();
-    }
-    enter(domNode, element) {
-        this._element_textbox = element.append("g").attr("class", "entity_textbox");
-        super.enter(domNode, element);
-        this._textbox_widget.target(this._element_textbox.node());
-    }
-    update() {
-        super.update.apply(this, arguments);
-        this._textbox_widget
-            .text(this._title_widget.text());
-        this._icon_widget
-            .shape_colorFill(this.iconColorFill())
-            .shape_colorStroke(this.iconColorStroke());
-        this._background_widget
-            .colorFill("none")
-            .colorStroke("none");
-
-        this._icon_widget.render();
-        this._textbox_widget.render();
-        const icon_bbox = this._icon_widget.getBBox(true);
-        const text_bbox = this._textbox_widget.getBBox(true);
-        let _icon_x = 0;
-        let _icon_y = -(text_bbox.height / 2) - (icon_bbox.height / 3);
-        switch (this.iconAnchor()) {
-            case "start":
-                _icon_x = -(text_bbox.width / 2) + (icon_bbox.width / 3);
-                break;
-            case "end":
-                _icon_x = (text_bbox.width / 2) - (icon_bbox.width / 3);
-                break;
-            case "left":
-                _icon_x = -(text_bbox.width / 2) - (icon_bbox.width / 2);
-                _icon_y = 0;
-                break;
-        }
-        this._icon_widget.move({
-            x: _icon_x,
-            y: _icon_y
-        });
-        this.moveAnnotations(text_bbox.width / 2, text_bbox.height / 2);
-    }
-    exit(domNode, element) {
-        this._textbox_widget.target(null);
-        super.exit(domNode, element);
-    }
-}
-EntityVertex.prototype._class += " common_EntityVertex";
-
-export interface EntityVertex {
-    iconAnchor(): string;
-    iconAnchor(_: string): this;
-    iconColorFill(): string;
-    iconColorFill(_: string): this;
-    iconColorStroke(): string;
-    iconColorStroke(_: string): this;
-    shape_colorStroke(): string;
-    shape_colorStroke(_: string): this;
-    shape_colorFill(): string;
-    shape_colorFill(_: string): this;
-    text_colorFill(): string;
-    text_colorFill(_: string): this;
-
-    textboxColorStroke(): string;
-    textboxColorStroke(_: string): this;
-    textboxColorFill(): string;
-    textboxColorFill(_: string): this;
-    textboxFontColor(): string;
-    textboxFontColor(_: string): this;
-}
-
-EntityVertex.prototype.publish("iconAnchor", "start", "set", "Horizontal anchor position of icon", ["", "start", "middle", "end", "left"]);
-EntityVertex.prototype.publish("iconColorFill", null, "html-color", "iconColorFill");
-EntityVertex.prototype.publish("iconColorStroke", null, "html-color", "iconColorStroke");
-
-EntityVertex.prototype.publishProxy("textboxColorStroke", "_textbox_widget", "shape_colorStroke");
-EntityVertex.prototype.publishProxy("textboxColorFill", "_textbox_widget", "shape_colorFill");
-EntityVertex.prototype.publishProxy("textboxFontColor", "_textbox_widget", "text_colorFill");
+import { Entity } from "./Entity";
+import { TextBox } from "./TextBox";
+
+export class EntityVertex extends Entity {
+    protected _textbox_widget: TextBox;
+    protected _element_textbox;
+    constructor() {
+        super();
+        this._textbox_widget = new TextBox();
+    }
+    enter(domNode, element) {
+        this._element_textbox = element.append("g").attr("class", "entity_textbox");
+        super.enter(domNode, element);
+        this._textbox_widget.target(this._element_textbox.node());
+    }
+    update() {
+        super.update.apply(this, arguments);
+        this._textbox_widget
+            .text(this._title_widget.text());
+        this._icon_widget
+            .shape_colorFill(this.iconColorFill())
+            .shape_colorStroke(this.iconColorStroke());
+        this._background_widget
+            .colorFill("none")
+            .colorStroke("none");
+
+        this._icon_widget.render();
+        this._textbox_widget.render();
+        const icon_bbox = this._icon_widget.getBBox(true);
+        const text_bbox = this._textbox_widget.getBBox(true);
+        let _icon_x = 0;
+        let _icon_y = -(text_bbox.height / 2) - (icon_bbox.height / 3);
+        switch (this.iconAnchor()) {
+            case "start":
+                _icon_x = -(text_bbox.width / 2) + (icon_bbox.width / 3);
+                break;
+            case "end":
+                _icon_x = (text_bbox.width / 2) - (icon_bbox.width / 3);
+                break;
+            case "left":
+                _icon_x = -(text_bbox.width / 2) - (icon_bbox.width / 2);
+                _icon_y = 0;
+                break;
+        }
+        this._icon_widget.move({
+            x: _icon_x,
+            y: _icon_y
+        });
+        this.moveAnnotations(text_bbox.width / 2, text_bbox.height / 2);
+    }
+    exit(domNode, element) {
+        this._textbox_widget.target(null);
+        super.exit(domNode, element);
+    }
+}
+EntityVertex.prototype._class += " common_EntityVertex";
+
+export interface EntityVertex {
+    iconAnchor(): string;
+    iconAnchor(_: string): this;
+    iconColorFill(): string;
+    iconColorFill(_: string): this;
+    iconColorStroke(): string;
+    iconColorStroke(_: string): this;
+    shape_colorStroke(): string;
+    shape_colorStroke(_: string): this;
+    shape_colorFill(): string;
+    shape_colorFill(_: string): this;
+    text_colorFill(): string;
+    text_colorFill(_: string): this;
+
+    textboxColorStroke(): string;
+    textboxColorStroke(_: string): this;
+    textboxColorFill(): string;
+    textboxColorFill(_: string): this;
+    textboxFontColor(): string;
+    textboxFontColor(_: string): this;
+}
+
+EntityVertex.prototype.publish("iconAnchor", "start", "set", "Horizontal anchor position of icon", ["", "start", "middle", "end", "left"]);
+EntityVertex.prototype.publish("iconColorFill", null, "html-color", "iconColorFill");
+EntityVertex.prototype.publish("iconColorStroke", null, "html-color", "iconColorStroke");
+
+EntityVertex.prototype.publishProxy("textboxColorStroke", "_textbox_widget", "shape_colorStroke");
+EntityVertex.prototype.publishProxy("textboxColorFill", "_textbox_widget", "shape_colorFill");
+EntityVertex.prototype.publishProxy("textboxFontColor", "_textbox_widget", "text_colorFill");

package/src/FAChar.css

@@ -1,3 +1,3 @@
-.common_FAChar .common_Text {
-    font-size: 14px;
+.common_FAChar .common_Text {
+    font-size: 14px;
 }