@hpcc-js/tree 2.45.0 → 2.45.1

package/src/DirectoryTree.ts

@@ -1,310 +1,310 @@
-import { HTMLWidget, Palette, Platform, select as d3Select, Utility,  } from "@hpcc-js/common";
-import { max as d3Max} from "d3-array";
-import { hierarchy as d3Hierarchy } from "d3-hierarchy";
-
-interface DirectoryItem {
-    color?: string;
-    iconClass?: string;
-    label: string;
-    depth: number;
-    content?: string;
-    markers?: any;
-    isFolder: boolean;
-    bold?: boolean;
-    selected?: boolean;
-    weightValue?: string;
-    weightColor?: string;
-}
-
-export class DirectoryTree extends HTMLWidget {
-
-    _palette;
-
-    constructor() {
-        super();
-    }
-
-    flattenData(json): DirectoryItem[] {
-        const context = this;
-        const root = d3Hierarchy(json);
-        const ret = [];
-
-        if (!this.omitRoot()) {
-            visitNode(root);
-        } else if (root.children) {
-            root.children.forEach(visitNode);
-        }
-
-        return ret;
-
-        function visitNode(node) {
-            const weightValue = node.data.markers && node.data.markers.length ? node.data.markers.length : "";
-            ret.push({
-                label: node.data.label,
-                depth: node.depth - (context.omitRoot() ? 1 : 0),
-                content: node.data.content,
-                isFolder: !!node.data.children,
-                iconClass: node.data.iconClass,
-                color: node.data.color,
-                bold: node.data.bold,
-                weightValue,
-                markers: node.data.markers,
-                selected: node.data.selected
-            });
-            if (node.children) {
-                node.children.forEach(visitNode);
-            }
-        }
-    }
-
-    protected iconClass(d) {
-        if (d.label === "error") {
-            return "fa fa-exclamation";
-        }
-        if (d.isFolder) {
-            return this.folderIconOpen();
-        }
-        return this.textFileIcon();
-    }
-
-    protected calcRequiredWidth() {
-        const flatData = this.flattenData(this.data());
-
-        let widest = 0;
-
-        const padding = this.rowItemPadding();
-        const iconWidth = this.iconSize() + (padding * 2);
-        const scrollbarWidth = Platform.getScrollbarWidth();
-
-        flatData.forEach(row => {
-            const offsetWidth = (row.depth * iconWidth) + (padding * 2);
-            const textWidth = Utility.textSize(
-                row.label,
-                this.fontFamily(),
-                this.fontSize(),
-                !!row.bold
-            ).width + (padding * 2);
-            const totalWidth = textWidth + iconWidth + offsetWidth + scrollbarWidth;
-            if (widest < totalWidth) {
-                widest = totalWidth;
-            }
-        });
-        return widest;
-    }
-
-    rowClick(str, markers) {}
-
-    enter(domNode, element) {
-        super.enter(domNode, element);
-        element
-            .style("width", "100%")
-            .style("height", "100%")
-            ;
-    }
-
-    update(domNode, element) {
-        super.update(domNode, element);
-
-        this._palette = this._palette.switch(this.paletteID());
-
-        element
-            .style("overflow-y", this.verticalScroll() ? "scroll" : null)
-            ;
-        const flatData = this.flattenData(this.data());
-        const maxWeightValue = d3Max(flatData, n=>Number(n.weightValue));
-
-        flatData.forEach(d=>{
-            if(!d.weightValue){
-                d.weightColor = "transparent";
-            } else {
-                d.weightColor = this._palette(d.weightValue, 1, maxWeightValue);
-            }
-        });
-        const context = this;
-        const padding = this.rowItemPadding();
-        const iconWidth = this.iconSize() + padding;
-        const lineHeight = Math.max(context.iconSize(), context.fontSize());
-        const rowSelection = element.selectAll(".directory-row").data(flatData);
-        const fontFamily = this.fontFamily();
-        const fontSize = this.fontSize();
-        const maxWeightWidth = d3Max(flatData, d=>this.textSize(d.weightValue, fontFamily, fontSize).width);
-        const rowItemPadding = `${padding}px ${padding}px ${padding / 2}px ${padding}px`;
-
-        const rowEnter = rowSelection.enter().append("div")
-            .attr("class", d => `directory-row directory-row-depth-${d.depth}`)
-            .style("display", "flex")
-            .style("cursor", "pointer")
-            .each(function (d: DirectoryItem) {
-                const rowDiv = d3Select(this);
-
-                const fontColor = d.color ? d.color : context.fontColor();
-                const weightColor = d.weightColor ? d.weightColor : "transparent";
-                const weightFontColor = Palette.textColor(weightColor);
-
-                const weightDiv = rowDiv.append("div")
-                    .attr("class", "row-weight")
-                    .style("padding", rowItemPadding)
-                    .style("color", weightFontColor)
-                    .style("box-shadow", `inset 0 0 100px ${weightColor}`)
-                    .style("font-weight", d.bold ? "bold" : "normal")
-                    .style("font-family", fontFamily)
-                    .style("font-size", fontSize + "px")
-                    .text(d.weightValue)
-                    .attr("title", d.weightValue)
-                    .style("overflow", "hidden")
-                    .style("width", (maxWeightWidth + (padding * 2)) + "px")
-                    .style("text-overflow", "ellipsis")
-                    .style("text-align", "right")
-                    .style("line-height", lineHeight + "px")
-                    ;
-                rowDiv.append("div")
-                    .attr("class", "row-depth")
-                    .style("width", (context.depthSize() * d.depth) + "px")
-                    .style("opacity", 1)
-                    .style("line-height", lineHeight + "px")
-                    ;
-                const iconDiv = rowDiv.append("div")
-                    .attr("class", "row-icon " + (d.iconClass ? d.iconClass : context.iconClass(d)))
-                    .style("width", iconWidth + "px")
-                    .style("height", lineHeight + "px")
-                    .style("color", fontColor)
-                    .style("background-color", d.selected ? context.selectionBackgroundColor() : "transparent")
-                    .style("font-size", context.iconSize() + "px")
-                    .style("padding", rowItemPadding)
-                    .style("line-height", lineHeight + "px")
-                    ;
-                const labelDiv = rowDiv.append("div")
-                    .attr("class", "row-label")
-                    .style("padding", rowItemPadding)
-                    .style("color", fontColor)
-                    .style("background-color", d.selected ? context.selectionBackgroundColor() : "transparent")
-                    .style("font-weight", d.bold ? "bold" : "normal")
-                    .style("font-family", context.fontFamily())
-                    .style("font-size", context.fontSize() + "px")
-                    .text(d.label)
-                    .attr("title", d.label)
-                    .style("flex", 1)
-                    .style("overflow", "hidden")
-                    .style("text-overflow", "ellipsis")
-                    .style("line-height", lineHeight + "px")
-                    ;
-                
-                rowDiv
-                    .on("mouseenter", () => {
-                        labelDiv.style("font-weight", "bold");
-                    })
-                    .on("mouseleave", () => {
-                        labelDiv.style("font-weight", d.bold ? "bold" : "normal");
-                    })
-                    ;
-                weightDiv
-                    .on("mouseenter", () => {
-                        context.weight_mouseenter(d);
-                    })
-                    .on("mouseleave", () => {
-                        context.weight_mouseleave(d);
-                    })
-                    ;
-                
-                if (d.isFolder) {
-                    rowDiv.on("click", function (d: any) {
-                        let next = this.nextSibling;
-                        const wasClosed = rowDiv.classed("folder-closed");
-                        if (wasClosed) {
-                            rowDiv.classed("folder-closed", false);
-                            rowDiv.classed("folder-open", true);
-                            iconDiv.attr("class", "row-icon " + context.folderIconOpen());
-                        } else {
-                            rowDiv.classed("folder-closed", true);
-                            rowDiv.classed("folder-open", false);
-                            iconDiv.attr("class", "row-icon " + context.folderIconClosed());
-                        }
-                        while (next !== null) {
-                            const nextDepth = (d3Select(next).datum() as any).depth;
-                            if (nextDepth > d.depth) {
-                                next.style.display = wasClosed ? "flex" : "none";
-                                next = next.nextSibling;
-                            } else {
-                                next = null;
-                            }
-                        }
-                    });
-                } else {
-                    rowDiv.on("click", () => {
-                        element.selectAll(".row-label").style("background-color", "transparent");
-                        element.selectAll(".row-icon").style("background-color", "transparent");
-                        iconDiv.style("background-color", context.selectionBackgroundColor());
-                        labelDiv.style("background-color", context.selectionBackgroundColor());
-                        const ext = d.label.split(".").pop().toLowerCase();
-                        context.rowClick(ext === "json" ? JSON.stringify(JSON.parse(d.content), null, 4) : d.content, d.markers);
-                    });
-                }
-            })
-            ;
-
-        rowEnter
-            .merge(rowSelection)
-            .style("background-color", context.backgroundColor())
-            ;
-
-        rowSelection.exit().remove();
-    }
-    weight_mouseenter(d){
-        
-    }
-    weight_mouseleave(d){
-
-    }
-}
-DirectoryTree.prototype._class += " tree_DirectoryTree";
-
-export interface DirectoryTree {
-    backgroundColor(): string;
-    backgroundColor(_: string): this;
-    fontColor(): string;
-    fontColor(_: string): this;
-    fontFamily(): string;
-    fontFamily(_: string): this;
-    omitRoot(): boolean;
-    omitRoot(_: boolean): this;
-    fontSize(): number;
-    fontSize(_: number): this;
-    iconSize(): number;
-    iconSize(_: number): this;
-    fileIconSize(): number;
-    fileIconSize(_: number): this;
-    folderIconOpen(): string;
-    folderIconOpen(_: string): this;
-    folderIconClosed(): string;
-    folderIconClosed(_: string): this;
-    hoverBackgroundColor(): string;
-    hoverBackgroundColor(_: string): this;
-    selectionBackgroundColor(): string;
-    selectionBackgroundColor(_: string): this;
-    rowItemPadding(): number;
-    rowItemPadding(_: number): this;
-    textFileIcon(): string;
-    textFileIcon(_: string): this;
-    verticalScroll(): boolean;
-    verticalScroll(_: boolean): this;
-    paletteID(): string;
-    paletteID(_: string): this;
-    depthSize(): number;
-    depthSize(_: number): this;
-}
-DirectoryTree.prototype._palette = Palette.rainbow("Blues");
-
-DirectoryTree.prototype.publish("depthSize", 14, "number", "Width of indentation per file or folder depth (pixels)");
-DirectoryTree.prototype.publish("paletteID", "Blues", "set", "Color palette for the weight backgrounds", DirectoryTree.prototype._palette.switch(), { tags: ["Basic"] });
-DirectoryTree.prototype.publish("omitRoot", false, "boolean", "If true, root node will not display");
-DirectoryTree.prototype.publish("rowItemPadding", 2, "number", "Top, bottom, left and right row item padding");
-DirectoryTree.prototype.publish("selectionBackgroundColor", "#CCC", "html-color", "Background color of selected directory rows");
-DirectoryTree.prototype.publish("backgroundColor", "#FFF", "html-color", "Directory item background color");
-DirectoryTree.prototype.publish("fontColor", "#000", "html-color", "Directory item font color");
-DirectoryTree.prototype.publish("fontFamily", "Arial", "string", "Directory item font family");
-DirectoryTree.prototype.publish("fontSize", 12, "number", "Directory item font size (pixels)");
-DirectoryTree.prototype.publish("iconSize", 12, "number", "Directory folder and file icon size (pixels)");
-DirectoryTree.prototype.publish("folderIconOpen", "fa fa-folder-open", "string", "Open folder icon class");
-DirectoryTree.prototype.publish("folderIconClosed", "fa fa-folder", "string", "Closed folder icon class");
-DirectoryTree.prototype.publish("textFileIcon", "fa fa-file-text-o", "string", "Text file icon class");
-DirectoryTree.prototype.publish("verticalScroll", true, "boolean", "If true, vertical scroll bar will be shown");
+import { HTMLWidget, Palette, Platform, select as d3Select, Utility,  } from "@hpcc-js/common";
+import { max as d3Max} from "d3-array";
+import { hierarchy as d3Hierarchy } from "d3-hierarchy";
+
+interface DirectoryItem {
+    color?: string;
+    iconClass?: string;
+    label: string;
+    depth: number;
+    content?: string;
+    markers?: any;
+    isFolder: boolean;
+    bold?: boolean;
+    selected?: boolean;
+    weightValue?: string;
+    weightColor?: string;
+}
+
+export class DirectoryTree extends HTMLWidget {
+
+    _palette;
+
+    constructor() {
+        super();
+    }
+
+    flattenData(json): DirectoryItem[] {
+        const context = this;
+        const root = d3Hierarchy(json);
+        const ret = [];
+
+        if (!this.omitRoot()) {
+            visitNode(root);
+        } else if (root.children) {
+            root.children.forEach(visitNode);
+        }
+
+        return ret;
+
+        function visitNode(node) {
+            const weightValue = node.data.markers && node.data.markers.length ? node.data.markers.length : "";
+            ret.push({
+                label: node.data.label,
+                depth: node.depth - (context.omitRoot() ? 1 : 0),
+                content: node.data.content,
+                isFolder: !!node.data.children,
+                iconClass: node.data.iconClass,
+                color: node.data.color,
+                bold: node.data.bold,
+                weightValue,
+                markers: node.data.markers,
+                selected: node.data.selected
+            });
+            if (node.children) {
+                node.children.forEach(visitNode);
+            }
+        }
+    }
+
+    protected iconClass(d) {
+        if (d.label === "error") {
+            return "fa fa-exclamation";
+        }
+        if (d.isFolder) {
+            return this.folderIconOpen();
+        }
+        return this.textFileIcon();
+    }
+
+    protected calcRequiredWidth() {
+        const flatData = this.flattenData(this.data());
+
+        let widest = 0;
+
+        const padding = this.rowItemPadding();
+        const iconWidth = this.iconSize() + (padding * 2);
+        const scrollbarWidth = Platform.getScrollbarWidth();
+
+        flatData.forEach(row => {
+            const offsetWidth = (row.depth * iconWidth) + (padding * 2);
+            const textWidth = Utility.textSize(
+                row.label,
+                this.fontFamily(),
+                this.fontSize(),
+                !!row.bold
+            ).width + (padding * 2);
+            const totalWidth = textWidth + iconWidth + offsetWidth + scrollbarWidth;
+            if (widest < totalWidth) {
+                widest = totalWidth;
+            }
+        });
+        return widest;
+    }
+
+    rowClick(str, markers) {}
+
+    enter(domNode, element) {
+        super.enter(domNode, element);
+        element
+            .style("width", "100%")
+            .style("height", "100%")
+            ;
+    }
+
+    update(domNode, element) {
+        super.update(domNode, element);
+
+        this._palette = this._palette.switch(this.paletteID());
+
+        element
+            .style("overflow-y", this.verticalScroll() ? "scroll" : null)
+            ;
+        const flatData = this.flattenData(this.data());
+        const maxWeightValue = d3Max(flatData, n=>Number(n.weightValue));
+
+        flatData.forEach(d=>{
+            if(!d.weightValue){
+                d.weightColor = "transparent";
+            } else {
+                d.weightColor = this._palette(d.weightValue, 1, maxWeightValue);
+            }
+        });
+        const context = this;
+        const padding = this.rowItemPadding();
+        const iconWidth = this.iconSize() + padding;
+        const lineHeight = Math.max(context.iconSize(), context.fontSize());
+        const rowSelection = element.selectAll(".directory-row").data(flatData);
+        const fontFamily = this.fontFamily();
+        const fontSize = this.fontSize();
+        const maxWeightWidth = d3Max(flatData, d=>this.textSize(d.weightValue, fontFamily, fontSize).width);
+        const rowItemPadding = `${padding}px ${padding}px ${padding / 2}px ${padding}px`;
+
+        const rowEnter = rowSelection.enter().append("div")
+            .attr("class", d => `directory-row directory-row-depth-${d.depth}`)
+            .style("display", "flex")
+            .style("cursor", "pointer")
+            .each(function (d: DirectoryItem) {
+                const rowDiv = d3Select(this);
+
+                const fontColor = d.color ? d.color : context.fontColor();
+                const weightColor = d.weightColor ? d.weightColor : "transparent";
+                const weightFontColor = Palette.textColor(weightColor);
+
+                const weightDiv = rowDiv.append("div")
+                    .attr("class", "row-weight")
+                    .style("padding", rowItemPadding)
+                    .style("color", weightFontColor)
+                    .style("box-shadow", `inset 0 0 100px ${weightColor}`)
+                    .style("font-weight", d.bold ? "bold" : "normal")
+                    .style("font-family", fontFamily)
+                    .style("font-size", fontSize + "px")
+                    .text(d.weightValue)
+                    .attr("title", d.weightValue)
+                    .style("overflow", "hidden")
+                    .style("width", (maxWeightWidth + (padding * 2)) + "px")
+                    .style("text-overflow", "ellipsis")
+                    .style("text-align", "right")
+                    .style("line-height", lineHeight + "px")
+                    ;
+                rowDiv.append("div")
+                    .attr("class", "row-depth")
+                    .style("width", (context.depthSize() * d.depth) + "px")
+                    .style("opacity", 1)
+                    .style("line-height", lineHeight + "px")
+                    ;
+                const iconDiv = rowDiv.append("div")
+                    .attr("class", "row-icon " + (d.iconClass ? d.iconClass : context.iconClass(d)))
+                    .style("width", iconWidth + "px")
+                    .style("height", lineHeight + "px")
+                    .style("color", fontColor)
+                    .style("background-color", d.selected ? context.selectionBackgroundColor() : "transparent")
+                    .style("font-size", context.iconSize() + "px")
+                    .style("padding", rowItemPadding)
+                    .style("line-height", lineHeight + "px")
+                    ;
+                const labelDiv = rowDiv.append("div")
+                    .attr("class", "row-label")
+                    .style("padding", rowItemPadding)
+                    .style("color", fontColor)
+                    .style("background-color", d.selected ? context.selectionBackgroundColor() : "transparent")
+                    .style("font-weight", d.bold ? "bold" : "normal")
+                    .style("font-family", context.fontFamily())
+                    .style("font-size", context.fontSize() + "px")
+                    .text(d.label)
+                    .attr("title", d.label)
+                    .style("flex", 1)
+                    .style("overflow", "hidden")
+                    .style("text-overflow", "ellipsis")
+                    .style("line-height", lineHeight + "px")
+                    ;
+                
+                rowDiv
+                    .on("mouseenter", () => {
+                        labelDiv.style("font-weight", "bold");
+                    })
+                    .on("mouseleave", () => {
+                        labelDiv.style("font-weight", d.bold ? "bold" : "normal");
+                    })
+                    ;
+                weightDiv
+                    .on("mouseenter", () => {
+                        context.weight_mouseenter(d);
+                    })
+                    .on("mouseleave", () => {
+                        context.weight_mouseleave(d);
+                    })
+                    ;
+                
+                if (d.isFolder) {
+                    rowDiv.on("click", function (d: any) {
+                        let next = this.nextSibling;
+                        const wasClosed = rowDiv.classed("folder-closed");
+                        if (wasClosed) {
+                            rowDiv.classed("folder-closed", false);
+                            rowDiv.classed("folder-open", true);
+                            iconDiv.attr("class", "row-icon " + context.folderIconOpen());
+                        } else {
+                            rowDiv.classed("folder-closed", true);
+                            rowDiv.classed("folder-open", false);
+                            iconDiv.attr("class", "row-icon " + context.folderIconClosed());
+                        }
+                        while (next !== null) {
+                            const nextDepth = (d3Select(next).datum() as any).depth;
+                            if (nextDepth > d.depth) {
+                                next.style.display = wasClosed ? "flex" : "none";
+                                next = next.nextSibling;
+                            } else {
+                                next = null;
+                            }
+                        }
+                    });
+                } else {
+                    rowDiv.on("click", () => {
+                        element.selectAll(".row-label").style("background-color", "transparent");
+                        element.selectAll(".row-icon").style("background-color", "transparent");
+                        iconDiv.style("background-color", context.selectionBackgroundColor());
+                        labelDiv.style("background-color", context.selectionBackgroundColor());
+                        const ext = d.label.split(".").pop().toLowerCase();
+                        context.rowClick(ext === "json" ? JSON.stringify(JSON.parse(d.content), null, 4) : d.content, d.markers);
+                    });
+                }
+            })
+            ;
+
+        rowEnter
+            .merge(rowSelection)
+            .style("background-color", context.backgroundColor())
+            ;
+
+        rowSelection.exit().remove();
+    }
+    weight_mouseenter(d){
+        
+    }
+    weight_mouseleave(d){
+
+    }
+}
+DirectoryTree.prototype._class += " tree_DirectoryTree";
+
+export interface DirectoryTree {
+    backgroundColor(): string;
+    backgroundColor(_: string): this;
+    fontColor(): string;
+    fontColor(_: string): this;
+    fontFamily(): string;
+    fontFamily(_: string): this;
+    omitRoot(): boolean;
+    omitRoot(_: boolean): this;
+    fontSize(): number;
+    fontSize(_: number): this;
+    iconSize(): number;
+    iconSize(_: number): this;
+    fileIconSize(): number;
+    fileIconSize(_: number): this;
+    folderIconOpen(): string;
+    folderIconOpen(_: string): this;
+    folderIconClosed(): string;
+    folderIconClosed(_: string): this;
+    hoverBackgroundColor(): string;
+    hoverBackgroundColor(_: string): this;
+    selectionBackgroundColor(): string;
+    selectionBackgroundColor(_: string): this;
+    rowItemPadding(): number;
+    rowItemPadding(_: number): this;
+    textFileIcon(): string;
+    textFileIcon(_: string): this;
+    verticalScroll(): boolean;
+    verticalScroll(_: boolean): this;
+    paletteID(): string;
+    paletteID(_: string): this;
+    depthSize(): number;
+    depthSize(_: number): this;
+}
+DirectoryTree.prototype._palette = Palette.rainbow("Blues");
+
+DirectoryTree.prototype.publish("depthSize", 14, "number", "Width of indentation per file or folder depth (pixels)");
+DirectoryTree.prototype.publish("paletteID", "Blues", "set", "Color palette for the weight backgrounds", DirectoryTree.prototype._palette.switch(), { tags: ["Basic"] });
+DirectoryTree.prototype.publish("omitRoot", false, "boolean", "If true, root node will not display");
+DirectoryTree.prototype.publish("rowItemPadding", 2, "number", "Top, bottom, left and right row item padding");
+DirectoryTree.prototype.publish("selectionBackgroundColor", "#CCC", "html-color", "Background color of selected directory rows");
+DirectoryTree.prototype.publish("backgroundColor", "#FFF", "html-color", "Directory item background color");
+DirectoryTree.prototype.publish("fontColor", "#000", "html-color", "Directory item font color");
+DirectoryTree.prototype.publish("fontFamily", "Arial", "string", "Directory item font family");
+DirectoryTree.prototype.publish("fontSize", 12, "number", "Directory item font size (pixels)");
+DirectoryTree.prototype.publish("iconSize", 12, "number", "Directory folder and file icon size (pixels)");
+DirectoryTree.prototype.publish("folderIconOpen", "fa fa-folder-open", "string", "Open folder icon class");
+DirectoryTree.prototype.publish("folderIconClosed", "fa fa-folder", "string", "Closed folder icon class");
+DirectoryTree.prototype.publish("textFileIcon", "fa fa-file-text-o", "string", "Text file icon class");
+DirectoryTree.prototype.publish("verticalScroll", true, "boolean", "If true, vertical scroll bar will be shown");

package/src/Indented.css

@@ -1,17 +1,17 @@
-.tree_Indented .node rect {
-  cursor: pointer;
-  fill: #fff;
-  stroke: #3182bd;
-  stroke-width: 1px;
-}
-
-.tree_Indented .node text {
-  font: 10px sans-serif;
-  pointer-events: none;
-}
-
-.tree_Indented path.link {
-  fill: none;
-  stroke: #9ecae1;
-  stroke-width: 1.5px;
+.tree_Indented .node rect {
+  cursor: pointer;
+  fill: #fff;
+  stroke: #3182bd;
+  stroke-width: 1px;
+}
+
+.tree_Indented .node text {
+  font: 10px sans-serif;
+  pointer-events: none;
+}
+
+.tree_Indented path.link {
+  fill: none;
+  stroke: #9ecae1;
+  stroke-width: 1.5px;
 }