@hpcc-js/common 3.6.2 → 3.6.5

package/src/Icon.ts

@@ -1,176 +1,176 @@
-import { FAChar } from "./FAChar.ts";
-import { textColor } from "./Palette.ts";
-import { Shape } from "./Shape.ts";
-import { SVGWidget } from "./SVGWidget.ts";
-
-import "../src/Icon.css";
-
-export class Icon extends SVGWidget {
-
-    protected _shapeWidget;
-    protected _faChar;
-    protected _defs;
-    protected _root;
-    protected _tooltipElement;
-
-    constructor() {
-        super();
-
-        this._shapeWidget = new Shape();
-        this._faChar = new FAChar();
-    }
-
-    getBBox(refresh = false, round = false) {
-        const diameter = this.diameter();
-        return {
-            x: - diameter / 2,
-            y: - diameter / 2,
-            width: diameter,
-            height: diameter
-        };
-    }
-
-    contains(point) {
-        return this._shapeWidget.contains(point);
-    }
-
-    intersection(pointA, pointB) {
-        return this._shapeWidget.intersection(pointA, pointB);
-    }
-
-    enter(domNode, element) {
-        super.enter(domNode, element);
-        delete this._prevHash;
-        this._defs = element.append("defs");
-        this._defs.append("clipPath")
-            .attr("id", "clip_" + this.id() + "_circle")
-            .append("circle")
-            .attr("x", 0)
-            .attr("y", 0)
-            ;
-        this._defs.append("clipPath")
-            .attr("id", "clip_" + this.id() + "_square")
-            .append("rect")
-            ;
-        this._root = element.append("g");
-        this._shapeWidget
-            .target(this._root.node())
-            ;
-        this._faChar
-            .target(element.node())
-            ;
-        this._tooltipElement = element.append("title");
-        const context = this;
-        element
-            .on("click", function (el) {
-                context.click(el);
-            })
-            .on("dblclick", function (el) {
-                context.dblclick(el);
-            })
-            ;
-    }
-
-    click(_domNode) {
-        // console.log("Clicked the icon");
-    }
-
-    dblclick(_domNode) {
-        // console.log("Double clicked the icon");
-    }
-
-    _prevHash;
-    update(domNode, element) {
-        super.update(domNode, element);
-        const hash = this.hashSum();
-        if (this._prevHash !== hash) {
-            this._prevHash = hash;
-
-            const diameter = this.diameter();
-            const radius = diameter / 2;
-            this._defs.select("circle")
-                .attr("r", radius)
-                ;
-            this._defs.select("rect")
-                .attr("x", -radius)
-                .attr("y", -radius)
-                .attr("width", diameter)
-                .attr("height", diameter)
-                ;
-            this._faChar
-                .fontSize(diameter * (100 - this.paddingPercent()) / 100)
-                .render()
-                ;
-            this._shapeWidget
-                .shape(this.shape())
-                .width(diameter)
-                .height(diameter)
-                .render()
-                ;
-            const image = this._root.selectAll("image").data(this.imageUrl() ? [this.imageUrl()] : [], function (d) { return d; });
-            image.enter()
-                .append("image")
-                .attr("xlink:href", this.imageUrl())
-                .merge(image)
-                .attr("clip-path", "url(#clip_" + this.id() + "_" + this.shape() + ")")
-                .attr("x", -radius)
-                .attr("y", -radius)
-                .attr("width", diameter)
-                .attr("height", diameter)
-                ;
-            if (this.shape_colorFill_exists() && !this.image_colorFill_exists()) {
-                this.image_colorFill(textColor(this.shape_colorFill()));
-            }
-            image.exit()
-                .remove()
-                ;
-            this._tooltipElement.text(this.tooltip());
-        }
-    }
-
-    exit(domNode, element) {
-        super.exit(domNode, element);
-        this._shapeWidget
-            .target(null)
-            ;
-        this._faChar
-            .target(null)
-            ;
-    }
-
-}
-Icon.prototype._class += " common_Icon";
-
-export interface Icon {
-    shape(): string;
-    shape(_: string): this;
-    faChar(): string;
-    faChar(_: string): this;
-    imageUrl(): string;
-    imageUrl(_: string): this;
-    image_colorFill(): string;
-    image_colorFill(_: string): this;
-    image_colorFill_exists(): boolean;
-    tooltip(): string;
-    tooltip(_: string): this;
-    diameter(): number;
-    diameter(_: number): this;
-    paddingPercent(): number;
-    paddingPercent(_: number): this;
-    shape_colorFill(): string;
-    shape_colorFill(_: string): this;
-    shape_colorFill_exists(): boolean;
-    shape_colorStroke(): string;
-    shape_colorStroke(_: string): this;
-}
-
-Icon.prototype.publish("shape", "circle", "set", "Shape Type", ["circle", "square"], { tags: ["Private"] });
-Icon.prototype.publishProxy("faChar", "_faChar", "char");
-Icon.prototype.publishProxy("fontFamily", "_faChar", "text_fontFamily");
-Icon.prototype.publish("imageUrl", null, "string", "Image URL", null, { optional: true });
-Icon.prototype.publishProxy("image_colorFill", "_faChar", "text_colorFill");
-Icon.prototype.publish("tooltip", "", "string", "Tooltip", null, { tags: ["Private"] });
-Icon.prototype.publish("diameter", 24, "number", "Diameter", null, { tags: ["Private"] });
-Icon.prototype.publish("paddingPercent", 45, "number", "Padding Percent", null, { tags: ["Private"] });
-Icon.prototype.publishProxy("shape_colorFill", "_shapeWidget", "colorFill");
-Icon.prototype.publishProxy("shape_colorStroke", "_shapeWidget", "colorStroke");
+import { FAChar } from "./FAChar.ts";
+import { textColor } from "./Palette.ts";
+import { Shape } from "./Shape.ts";
+import { SVGWidget } from "./SVGWidget.ts";
+
+import "../src/Icon.css";
+
+export class Icon extends SVGWidget {
+
+    protected _shapeWidget;
+    protected _faChar;
+    protected _defs;
+    protected _root;
+    protected _tooltipElement;
+
+    constructor() {
+        super();
+
+        this._shapeWidget = new Shape();
+        this._faChar = new FAChar();
+    }
+
+    getBBox(refresh = false, round = false) {
+        const diameter = this.diameter();
+        return {
+            x: - diameter / 2,
+            y: - diameter / 2,
+            width: diameter,
+            height: diameter
+        };
+    }
+
+    contains(point) {
+        return this._shapeWidget.contains(point);
+    }
+
+    intersection(pointA, pointB) {
+        return this._shapeWidget.intersection(pointA, pointB);
+    }
+
+    enter(domNode, element) {
+        super.enter(domNode, element);
+        delete this._prevHash;
+        this._defs = element.append("defs");
+        this._defs.append("clipPath")
+            .attr("id", "clip_" + this.id() + "_circle")
+            .append("circle")
+            .attr("x", 0)
+            .attr("y", 0)
+            ;
+        this._defs.append("clipPath")
+            .attr("id", "clip_" + this.id() + "_square")
+            .append("rect")
+            ;
+        this._root = element.append("g");
+        this._shapeWidget
+            .target(this._root.node())
+            ;
+        this._faChar
+            .target(element.node())
+            ;
+        this._tooltipElement = element.append("title");
+        const context = this;
+        element
+            .on("click", function (el) {
+                context.click(el);
+            })
+            .on("dblclick", function (el) {
+                context.dblclick(el);
+            })
+            ;
+    }
+
+    click(_domNode) {
+        // console.log("Clicked the icon");
+    }
+
+    dblclick(_domNode) {
+        // console.log("Double clicked the icon");
+    }
+
+    _prevHash;
+    update(domNode, element) {
+        super.update(domNode, element);
+        const hash = this.hashSum();
+        if (this._prevHash !== hash) {
+            this._prevHash = hash;
+
+            const diameter = this.diameter();
+            const radius = diameter / 2;
+            this._defs.select("circle")
+                .attr("r", radius)
+                ;
+            this._defs.select("rect")
+                .attr("x", -radius)
+                .attr("y", -radius)
+                .attr("width", diameter)
+                .attr("height", diameter)
+                ;
+            this._faChar
+                .fontSize(diameter * (100 - this.paddingPercent()) / 100)
+                .render()
+                ;
+            this._shapeWidget
+                .shape(this.shape())
+                .width(diameter)
+                .height(diameter)
+                .render()
+                ;
+            const image = this._root.selectAll("image").data(this.imageUrl() ? [this.imageUrl()] : [], function (d) { return d; });
+            image.enter()
+                .append("image")
+                .attr("xlink:href", this.imageUrl())
+                .merge(image)
+                .attr("clip-path", "url(#clip_" + this.id() + "_" + this.shape() + ")")
+                .attr("x", -radius)
+                .attr("y", -radius)
+                .attr("width", diameter)
+                .attr("height", diameter)
+                ;
+            if (this.shape_colorFill_exists() && !this.image_colorFill_exists()) {
+                this.image_colorFill(textColor(this.shape_colorFill()));
+            }
+            image.exit()
+                .remove()
+                ;
+            this._tooltipElement.text(this.tooltip());
+        }
+    }
+
+    exit(domNode, element) {
+        super.exit(domNode, element);
+        this._shapeWidget
+            .target(null)
+            ;
+        this._faChar
+            .target(null)
+            ;
+    }
+
+}
+Icon.prototype._class += " common_Icon";
+
+export interface Icon {
+    shape(): string;
+    shape(_: string): this;
+    faChar(): string;
+    faChar(_: string): this;
+    imageUrl(): string;
+    imageUrl(_: string): this;
+    image_colorFill(): string;
+    image_colorFill(_: string): this;
+    image_colorFill_exists(): boolean;
+    tooltip(): string;
+    tooltip(_: string): this;
+    diameter(): number;
+    diameter(_: number): this;
+    paddingPercent(): number;
+    paddingPercent(_: number): this;
+    shape_colorFill(): string;
+    shape_colorFill(_: string): this;
+    shape_colorFill_exists(): boolean;
+    shape_colorStroke(): string;
+    shape_colorStroke(_: string): this;
+}
+
+Icon.prototype.publish("shape", "circle", "set", "Shape Type", ["circle", "square"], { tags: ["Private"] });
+Icon.prototype.publishProxy("faChar", "_faChar", "char");
+Icon.prototype.publishProxy("fontFamily", "_faChar", "text_fontFamily");
+Icon.prototype.publish("imageUrl", null, "string", "Image URL", null, { optional: true });
+Icon.prototype.publishProxy("image_colorFill", "_faChar", "text_colorFill");
+Icon.prototype.publish("tooltip", "", "string", "Tooltip", null, { tags: ["Private"] });
+Icon.prototype.publish("diameter", 24, "number", "Diameter", null, { tags: ["Private"] });
+Icon.prototype.publish("paddingPercent", 45, "number", "Padding Percent", null, { tags: ["Private"] });
+Icon.prototype.publishProxy("shape_colorFill", "_shapeWidget", "colorFill");
+Icon.prototype.publishProxy("shape_colorStroke", "_shapeWidget", "colorStroke");

package/src/Image.ts

@@ -1,104 +1,104 @@
-import { select as d3Select } from "d3-selection";
-import { HTMLWidget } from "./HTMLWidget.ts";
-
-export class Image extends HTMLWidget {
-    private _imgElement;
-
-    constructor() {
-        super();
-    }
-
-    enter(domNode, element) {
-        super.enter(domNode, element);
-    }
-
-    update(domNode, element) {
-        super.update(domNode, element);
-        const context = this;
-        const img = element.selectAll("img").data(this.source() ? [this.source()] : [], function (d) { return d; });
-        img.enter()
-            .append("img")
-            .attr("src", this.source())
-            .style("opacity", 0)
-            .on("load", function () {
-                context._imgElement = d3Select(this);
-                context.styleImageElement();
-                context._imgElement.style("opacity", 1);
-            })
-            ;
-        this.styleImageElement();
-        img.exit()
-            .remove()
-            ;
-    }
-
-    styleImageElement() {
-        if (!this._imgElement) return;
-        switch (this.sizing()) {
-            case "actual":
-                this._imgElement.style("width", "auto");
-                this._imgElement.style("height", "auto");
-                break;
-            case "fit":
-                if (this.lockAspectRatio()) {
-                    this._imgElement.style("width", "auto");
-                    this._imgElement.style("height", "auto");
-                    const bbox = this._imgElement.node().getBoundingClientRect();
-                    const xScale = bbox.width / this.width();
-                    const yScale = bbox.height / this.height();
-                    if (xScale > yScale) {
-                        this._imgElement.style("width", this.width() + "px");
-                        this._imgElement.style("height", (bbox.height / xScale) + "px");
-                    } else {
-                        this._imgElement.style("width", (bbox.width / yScale) + "px");
-                        this._imgElement.style("height", this.height() + "px");
-                    }
-                } else {
-                    this._imgElement.style("width", this.width() + "px");
-                    this._imgElement.style("height", this.height() + "px");
-                }
-                break;
-            case "custom":
-                this._imgElement.style("width", this.customWidth());
-                this._imgElement.style("height", this.customHeight());
-                break;
-        }
-        switch (this.alignment()) {
-            case "origin":
-                break;
-            case "center":
-                const bbox = this._imgElement.node().getBoundingClientRect();
-                this._imgElement.style("margin-left", `${(this.width() - bbox.width) / 2}px`);
-                this._imgElement.style("margin-top", `${(this.height() - bbox.height) / 2}px`);
-                break;
-        }
-    }
-
-    exit(domNode, element) {
-        super.exit(domNode, element);
-    }
-
-}
-Image.prototype._class += " common_Image";
-
-export interface Image {
-    source(): string;
-    source(_: string): this;
-    sizing(): "actual" | "fit" | "custom";
-    sizing(_: "actual" | "fit" | "custom"): this;
-    customWidth(): string;
-    customWidth(_: string): this;
-    customHeight(): string;
-    customHeight(_: string): this;
-    lockAspectRatio(): boolean;
-    lockAspectRatio(_: boolean): this;
-    alignment(): "center" | "origin";
-    alignment(_: "center" | "origin"): this;
-}
-
-Image.prototype.publish("source", null, "string", "Image Source", null, { tags: ["Basic"] });
-Image.prototype.publish("sizing", "actual", "set", "Controls sizing mode", ["actual", "fit", "custom"], { tags: ["Basic"] });
-Image.prototype.publish("customWidth", "50%", "string", "Applies this width to IMG element if 'sizing' is set to 'custom' (user should set 'px' or 'em' etc.)", null, { tags: ["Basic"], disable: (w) => w.sizing() !== "custom" });
-Image.prototype.publish("customHeight", "20%", "string", "Applies this height to IMG element if 'sizing' is set to 'custom' (user should set 'px' or 'em' etc.)", null, { tags: ["Basic"], disable: (w) => w.sizing() !== "custom" });
-Image.prototype.publish("lockAspectRatio", true, "boolean", "Locks the aspect ratio when scaling/stretching", null, { tags: ["Basic"], disable: (w) => w.sizing() !== "fit" });
-Image.prototype.publish("alignment", "center", "set", "Image Alignment", ["center", "origin"], { tags: ["Basic"] });
+import { select as d3Select } from "d3-selection";
+import { HTMLWidget } from "./HTMLWidget.ts";
+
+export class Image extends HTMLWidget {
+    private _imgElement;
+
+    constructor() {
+        super();
+    }
+
+    enter(domNode, element) {
+        super.enter(domNode, element);
+    }
+
+    update(domNode, element) {
+        super.update(domNode, element);
+        const context = this;
+        const img = element.selectAll("img").data(this.source() ? [this.source()] : [], function (d) { return d; });
+        img.enter()
+            .append("img")
+            .attr("src", this.source())
+            .style("opacity", 0)
+            .on("load", function () {
+                context._imgElement = d3Select(this);
+                context.styleImageElement();
+                context._imgElement.style("opacity", 1);
+            })
+            ;
+        this.styleImageElement();
+        img.exit()
+            .remove()
+            ;
+    }
+
+    styleImageElement() {
+        if (!this._imgElement) return;
+        switch (this.sizing()) {
+            case "actual":
+                this._imgElement.style("width", "auto");
+                this._imgElement.style("height", "auto");
+                break;
+            case "fit":
+                if (this.lockAspectRatio()) {
+                    this._imgElement.style("width", "auto");
+                    this._imgElement.style("height", "auto");
+                    const bbox = this._imgElement.node().getBoundingClientRect();
+                    const xScale = bbox.width / this.width();
+                    const yScale = bbox.height / this.height();
+                    if (xScale > yScale) {
+                        this._imgElement.style("width", this.width() + "px");
+                        this._imgElement.style("height", (bbox.height / xScale) + "px");
+                    } else {
+                        this._imgElement.style("width", (bbox.width / yScale) + "px");
+                        this._imgElement.style("height", this.height() + "px");
+                    }
+                } else {
+                    this._imgElement.style("width", this.width() + "px");
+                    this._imgElement.style("height", this.height() + "px");
+                }
+                break;
+            case "custom":
+                this._imgElement.style("width", this.customWidth());
+                this._imgElement.style("height", this.customHeight());
+                break;
+        }
+        switch (this.alignment()) {
+            case "origin":
+                break;
+            case "center":
+                const bbox = this._imgElement.node().getBoundingClientRect();
+                this._imgElement.style("margin-left", `${(this.width() - bbox.width) / 2}px`);
+                this._imgElement.style("margin-top", `${(this.height() - bbox.height) / 2}px`);
+                break;
+        }
+    }
+
+    exit(domNode, element) {
+        super.exit(domNode, element);
+    }
+
+}
+Image.prototype._class += " common_Image";
+
+export interface Image {
+    source(): string;
+    source(_: string): this;
+    sizing(): "actual" | "fit" | "custom";
+    sizing(_: "actual" | "fit" | "custom"): this;
+    customWidth(): string;
+    customWidth(_: string): this;
+    customHeight(): string;
+    customHeight(_: string): this;
+    lockAspectRatio(): boolean;
+    lockAspectRatio(_: boolean): this;
+    alignment(): "center" | "origin";
+    alignment(_: "center" | "origin"): this;
+}
+
+Image.prototype.publish("source", null, "string", "Image Source", null, { tags: ["Basic"] });
+Image.prototype.publish("sizing", "actual", "set", "Controls sizing mode", ["actual", "fit", "custom"], { tags: ["Basic"] });
+Image.prototype.publish("customWidth", "50%", "string", "Applies this width to IMG element if 'sizing' is set to 'custom' (user should set 'px' or 'em' etc.)", null, { tags: ["Basic"], disable: (w) => w.sizing() !== "custom" });
+Image.prototype.publish("customHeight", "20%", "string", "Applies this height to IMG element if 'sizing' is set to 'custom' (user should set 'px' or 'em' etc.)", null, { tags: ["Basic"], disable: (w) => w.sizing() !== "custom" });
+Image.prototype.publish("lockAspectRatio", true, "boolean", "Locks the aspect ratio when scaling/stretching", null, { tags: ["Basic"], disable: (w) => w.sizing() !== "fit" });
+Image.prototype.publish("alignment", "center", "set", "Image Alignment", ["center", "origin"], { tags: ["Basic"] });

package/src/List.css

@@ -1,13 +1,13 @@
-.common_List .common_TextBox .common_Shape {
-    fill: #dcf1ff;
-    stroke: #dcf1ff;
-}
-
-.common_List .common_TextBox .common_Text {
-    pointer-events: none;
-}
-
-.common_List .common_TextBox .common_Shape:hover {
-    fill: white;
-    stroke: white;
-}
+.common_List .common_TextBox .common_Shape {
+    fill: #dcf1ff;
+    stroke: #dcf1ff;
+}
+
+.common_List .common_TextBox .common_Text {
+    pointer-events: none;
+}
+
+.common_List .common_TextBox .common_Shape:hover {
+    fill: white;
+    stroke: white;
+}