@mwater/visualization 5.2.0 → 5.3.1

package/lib/richtext/RichTextComponent.js

@@ -4,22 +4,24 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const R = react_1.default.createElement;
 const lodash_1 = __importDefault(require("lodash"));
 const expressions_ui_1 = require("@mwater/expressions-ui");
 const ItemsHtmlConverter_1 = __importDefault(require("./ItemsHtmlConverter"));
 const react_float_affixed_1 = __importDefault(require("react-float-affixed"));
 const FontColorPaletteItem_1 = __importDefault(require("./FontColorPaletteItem"));
-const FontSizePaletteItem_1 = __importDefault(require("./FontSizePaletteItem"));
+const DropdownPaletteItem_1 = __importDefault(require("./DropdownPaletteItem"));
 class RichTextComponent extends react_1.default.Component {
     static defaultProps = {
         includeHeadings: true,
         items: [],
         itemsHtmlConverter: new ItemsHtmlConverter_1.default(),
     };
-    entireComponent;
-    contentEditable;
-    paletteComponent;
+    entireComponent = null;
+    contentEditable = null;
+    paletteComponent = null;
+    /** Number of changes in progress. Used with beginChanges and endChanges
+     * to prevent onChange being called during a change */
+    changesInProgress = 0;
     constructor(props) {
         super(props);
         this.state = {
@@ -40,21 +42,19 @@ class RichTextComponent extends react_1.default.Component {
     focus() {
         this.contentEditable.focus();
     }
+    beginChanges() {
+        this.changesInProgress++;
+    }
+    endChanges() {
+        this.changesInProgress--;
+        if (this.changesInProgress === 0) {
+            this.handleChange(this.contentEditable.getEditor());
+        }
+    }
     handleInsertExpr = (item) => {
         const html = '<div data-embed="' + lodash_1.default.escape(JSON.stringify(item)) + '"></div>';
         this.contentEditable.pasteHTML(html);
     };
-    handleSetFontSize = (size) => {
-        // Requires a selection
-        let html = this.contentEditable.getSelectedHTML();
-        if (!html) {
-            return alert("Please select text first to set size");
-        }
-        // Clear existing font-size styles. This is clearly a hack, but font sizes are absolute in execCommand which
-        // doesn't mix with our various dashboard stylings, so we need to use percentages
-        html = html.replace(/font-size:\s*\d+%;?/g, "");
-        return this.contentEditable.pasteHTML(`<span style=\"font-size:${size}\">` + html + "</span>");
-    };
     handleSetFontColor = (color) => {
         // Requires a selection
         const html = this.contentEditable.getSelectedHTML();
@@ -63,7 +63,60 @@ class RichTextComponent extends react_1.default.Component {
         }
         this.handleCommand("foreColor", color);
     };
+    handleSetFontSize = (tag, size) => {
+        this.beginChanges();
+        try {
+            this.handleCommand("formatBlock", `<${tag}>`);
+            const selection = window.getSelection();
+            if (!selection || !selection.rangeCount)
+                return;
+            // Function to apply or remove font size
+            const applyFontSize = (element) => {
+                if (size === null) {
+                    element.style.removeProperty("font-size");
+                }
+                else {
+                    element.style.fontSize = size;
+                }
+            };
+            // Get the start and end containers of the selection
+            const range = selection.getRangeAt(0);
+            let startNode = range.startContainer.nodeType === Node.TEXT_NODE ? range.startContainer.parentElement : range.startContainer.childNodes[range.startOffset];
+            let endNode = range.endContainer.nodeType === Node.TEXT_NODE ? range.endContainer.parentElement : range.endContainer.childNodes[range.endOffset];
+            // Find element that has parent with contentEditable
+            while (startNode && !startNode.parentElement?.contentEditable) {
+                startNode = startNode.parentElement;
+            }
+            while (endNode && !endNode.parentElement?.contentEditable) {
+                endNode = endNode.parentElement;
+            }
+            if (!startNode || !endNode || startNode.nodeType !== Node.ELEMENT_NODE || endNode.nodeType !== Node.ELEMENT_NODE) {
+                return;
+            }
+            // Get array of nodes between start and end
+            const rootElements = [];
+            let node = startNode;
+            while (node !== null) {
+                if (node.nodeType === Node.ELEMENT_NODE) {
+                    rootElements.push(node);
+                }
+                if (node === endNode) {
+                    break;
+                }
+                node = node.nextSibling;
+            }
+            for (const element of rootElements) {
+                applyFontSize(element);
+            }
+        }
+        finally {
+            this.endChanges();
+        }
+    };
     handleChange = (elem) => {
+        if (this.changesInProgress > 0) {
+            return;
+        }
         const items = this.props.itemsHtmlConverter.convertElemToItems(elem);
         // Check if changed
         if (!lodash_1.default.isEqual(items, this.props.items)) {
@@ -75,10 +128,10 @@ class RichTextComponent extends react_1.default.Component {
         }
     };
     handleFocus = () => {
-        return this.setState({ focused: true });
+        this.setState({ focused: true });
     };
     handleBlur = () => {
-        return this.setState({ focused: false });
+        this.setState({ focused: false });
     };
     // Perform a command such as bold, underline, etc.
     handleCommand = (command, param, ev) => {
@@ -88,10 +141,10 @@ class RichTextComponent extends react_1.default.Component {
         if (["foreColor"].includes(command)) {
             document.execCommand("styleWithCSS", null, true);
             document.execCommand(command, false, param);
-            return document.execCommand("styleWithCSS", null, false);
+            document.execCommand("styleWithCSS", null, false);
         }
         else {
-            return document.execCommand(command, false, param);
+            document.execCommand(command, false, param);
         }
     };
     handleCreateLink = (ev) => {
@@ -108,10 +161,11 @@ class RichTextComponent extends react_1.default.Component {
         if (!this.state.focused) {
             this.setState({ focused: true });
         }
-        if (ev.target.dataset?.embed || ev.target.parentElement?.dataset?.embed) {
-            const item = JSON.parse(ev.target.dataset?.embed || ev.target.parentElement?.dataset?.embed);
+        const target = ev.target;
+        if (target.dataset?.embed || target.parentElement?.dataset?.embed) {
+            const item = JSON.parse(target.dataset?.embed || target.parentElement?.dataset?.embed);
             if (item != null) {
-                return this.props.onItemClick?.(item);
+                this.props.onItemClick?.(item);
             }
         }
     };
@@ -130,126 +184,110 @@ class RichTextComponent extends react_1.default.Component {
             }
             elem = elem.parentElement;
         }
-        return R(react_float_affixed_1.default, {
-            style: { zIndex },
-            edges: "over,under,left,right",
-            align: "center",
-            render: this.renderPaletteContent,
-        });
+        return (react_1.default.createElement(react_float_affixed_1.default, { style: { zIndex }, edges: "over,under,left,right", align: "center", render: this.renderPaletteContent }));
     }
     renderPaletteContent = (schemeName, { edges }) => {
-        return R("div", {
-            key: "palette",
-            className: "mwater-visualization-text-palette",
-            ref: (c) => {
+        return (react_1.default.createElement("div", { key: "palette", className: "mwater-visualization-text-palette", ref: (c) => {
                 this.paletteComponent = c;
-            },
-        }, R("div", {
-            key: "bold",
-            className: "mwater-visualization-text-palette-item",
-            onMouseDown: this.handleCommand.bind(null, "bold", null),
-        }, R("b", null, "B")), R("div", {
-            key: "italic",
-            className: "mwater-visualization-text-palette-item",
-            onMouseDown: this.handleCommand.bind(null, "italic", null),
-        }, R("i", null, "I")), R("div", {
-            key: "underline",
-            className: "mwater-visualization-text-palette-item",
-            onMouseDown: this.handleCommand.bind(null, "underline", null),
-        }, R("span", { style: { textDecoration: "underline" } }, "U")), R(FontColorPaletteItem_1.default, {
-            key: "foreColor",
-            onSetColor: this.handleSetFontColor,
-            position: schemeName === "over" ? "under" : "over",
-        }), R(FontSizePaletteItem_1.default, {
-            key: "fontSize",
-            onSetSize: this.handleSetFontSize,
-            position: schemeName === "over" ? "under" : "over",
-        }), R("div", { key: "link", className: "mwater-visualization-text-palette-item", onMouseDown: this.handleCreateLink }, R("i", { className: "fa fa-link" })), R("div", {
-            key: "justifyLeft",
-            className: "mwater-visualization-text-palette-item",
-            onMouseDown: this.handleCommand.bind(null, "justifyLeft", null),
-        }, R("i", { className: "fa fa-align-left" })), R("div", {
-            key: "justifyCenter",
-            className: "mwater-visualization-text-palette-item",
-            onMouseDown: this.handleCommand.bind(null, "justifyCenter", null),
-        }, R("i", { className: "fa fa-align-center" })), R("div", {
-            key: "justifyRight",
-            className: "mwater-visualization-text-palette-item",
-            onMouseDown: this.handleCommand.bind(null, "justifyRight", null),
-        }, R("i", { className: "fa fa-align-right" })), R("div", {
-            key: "justifyFull",
-            className: "mwater-visualization-text-palette-item",
-            onMouseDown: this.handleCommand.bind(null, "justifyFull", null),
-        }, R("i", { className: "fa fa-align-justify" })), R("div", {
-            key: "insertUnorderedList",
-            className: "mwater-visualization-text-palette-item",
-            onMouseDown: this.handleCommand.bind(null, "insertUnorderedList", null),
-        }, R("i", { className: "fa fa-list-ul" })), R("div", {
-            key: "insertOrderedList",
-            className: "mwater-visualization-text-palette-item",
-            onMouseDown: this.handleCommand.bind(null, "insertOrderedList", null),
-        }, R("i", { className: "fa fa-list-ol" })), this.props.includeHeadings
-            ? [
-                R("div", {
-                    key: "h1",
-                    className: "mwater-visualization-text-palette-item",
-                    onMouseDown: this.handleCommand.bind(null, "formatBlock", "<H1>"),
-                }, R("i", { className: "fa fa-header" })),
-                R("div", {
-                    key: "h2",
-                    className: "mwater-visualization-text-palette-item",
-                    onMouseDown: this.handleCommand.bind(null, "formatBlock", "<H2>"),
-                }, R("i", { className: "fa fa-header", style: { fontSize: "80%" } })),
-                R("div", {
-                    key: "p",
-                    className: "mwater-visualization-text-palette-item",
-                    onMouseDown: this.handleCommand.bind(null, "formatBlock", "<div>"),
-                }, "\u00b6"),
-            ]
-            : undefined, R("div", {
-            key: "removeFormat",
-            className: "mwater-visualization-text-palette-item",
-            onMouseDown: this.handleCommand.bind(null, "removeFormat", null),
-            style: { paddingLeft: 5, paddingRight: 5 },
-        }, R("img", { src: removeFormatIcon, style: { height: 20 } })), this.props.extraPaletteButtons);
+            } },
+            react_1.default.createElement("div", { key: "bold", className: "mwater-visualization-text-palette-item", onMouseDown: (ev) => this.handleCommand("bold", null, ev) },
+                react_1.default.createElement("i", { className: "fas fa-bold" })),
+            react_1.default.createElement("div", { key: "italic", className: "mwater-visualization-text-palette-item", onMouseDown: (ev) => this.handleCommand("italic", null, ev) },
+                react_1.default.createElement("i", { className: "fas fa-italic" })),
+            react_1.default.createElement("div", { key: "underline", className: "mwater-visualization-text-palette-item", onMouseDown: (ev) => this.handleCommand("underline", null, ev) },
+                react_1.default.createElement("i", { className: "fas fa-underline" })),
+            react_1.default.createElement(FontColorPaletteItem_1.default, { key: "foreColor", onSetColor: this.handleSetFontColor, position: schemeName === "over" ? "under" : "over" }),
+            react_1.default.createElement("div", { key: "link", className: "mwater-visualization-text-palette-item", onMouseDown: (ev) => this.handleCreateLink(ev) },
+                react_1.default.createElement("i", { className: "fas fa-link" })),
+            react_1.default.createElement("div", { key: "removeFormat", className: "mwater-visualization-text-palette-item", onMouseDown: (ev) => this.handleCommand("removeFormat", null, ev), style: { paddingLeft: 5, paddingRight: 5 } },
+                react_1.default.createElement("i", { className: "fas fa-remove-format" })),
+            react_1.default.createElement(DropdownPaletteItem_1.default, { key: "justify", items: [
+                    { label: react_1.default.createElement("span", null,
+                            react_1.default.createElement("i", { className: "fas fa-align-left fa-fw" }),
+                            " Left"), value: "justifyLeft" },
+                    { label: react_1.default.createElement("span", null,
+                            react_1.default.createElement("i", { className: "fas fa-align-center fa-fw" }),
+                            " Center"), value: "justifyCenter" },
+                    { label: react_1.default.createElement("span", null,
+                            react_1.default.createElement("i", { className: "fas fa-align-right fa-fw" }),
+                            " Right"), value: "justifyRight" },
+                    { label: react_1.default.createElement("span", null,
+                            react_1.default.createElement("i", { className: "fas fa-align-justify fa-fw" }),
+                            " Justify"), value: "justifyFull" },
+                ], onSelect: (value) => this.handleCommand(value, null), position: schemeName === "over" ? "under" : "over", label: react_1.default.createElement("i", { className: "fas fa-align-left" }) }),
+            react_1.default.createElement("div", { key: "insertUnorderedList", className: "mwater-visualization-text-palette-item", onMouseDown: (ev) => this.handleCommand("insertUnorderedList", null, ev) },
+                react_1.default.createElement("i", { className: "fas fa-list-ul" })),
+            react_1.default.createElement("div", { key: "insertOrderedList", className: "mwater-visualization-text-palette-item", onMouseDown: (ev) => this.handleCommand("insertOrderedList", null, ev) },
+                react_1.default.createElement("i", { className: "fas fa-list-ol" })),
+            this.props.includeHeadings && [
+                react_1.default.createElement(DropdownPaletteItem_1.default, { key: "paragraph", items: [
+                        { label: "Heading 1", value: "h1" },
+                        { label: "Heading 2", value: "h2" },
+                        { label: "Extra Small", value: "xsmall" },
+                        { label: "Small", value: "small" },
+                        { label: "Normal", value: "normal" },
+                        { label: "Large", value: "large" },
+                        { label: "Extra Large", value: "xlarge" },
+                        { label: "6px", value: "6px", more: true },
+                        { label: "7px", value: "7px", more: true },
+                        { label: "8px", value: "8px", more: true },
+                        { label: "9px", value: "9px", more: true },
+                        { label: "10px", value: "10px", more: true },
+                        { label: "11px", value: "11px", more: true },
+                        { label: "12px", value: "12px", more: true },
+                        { label: "14px", value: "14px", more: true },
+                        { label: "16px", value: "16px", more: true },
+                        { label: "18px", value: "18px", more: true },
+                        { label: "20px", value: "20px", more: true },
+                        { label: "22px", value: "22px", more: true },
+                        { label: "24px", value: "24px", more: true },
+                        { label: "30px", value: "30px", more: true },
+                        { label: "36px", value: "36px", more: true },
+                    ], onSelect: (tag) => {
+                        if (tag.startsWith("h")) {
+                            this.handleSetFontSize(tag, null);
+                        }
+                        else if (tag === "normal") {
+                            this.handleSetFontSize("div", null);
+                        }
+                        else if (tag === "large") {
+                            this.handleSetFontSize("div", "120%");
+                        }
+                        else if (tag === "xlarge") {
+                            this.handleSetFontSize("div", "150%");
+                        }
+                        else if (tag === "small") {
+                            this.handleSetFontSize("div", "87.5%");
+                        }
+                        else if (tag === "xsmall") {
+                            this.handleSetFontSize("div", "75%");
+                        }
+                        else {
+                            this.handleSetFontSize("div", tag);
+                        }
+                    }, position: schemeName === "over" ? "under" : "over", label: react_1.default.createElement("i", { className: "fas fa-text-size" }) })
+            ],
+            this.props.extraPaletteButtons));
     };
     refContentEditable = (c) => {
         this.contentEditable = c;
     };
     renderHtml() {
         if (this.props.onItemsChange != null) {
-            return R("div", { key: "contents", style: this.props.style, className: this.props.className }, R(expressions_ui_1.ContentEditableComponent, {
-                ref: this.refContentEditable,
-                style: { outline: "none" },
-                html: this.createHtml(),
-                onChange: this.handleChange,
-                onClick: this.handleEditorClick,
-                onFocus: this.handleFocus,
-                onBlur: this.handleBlur,
-            }), this.props.items?.[0] == null
-                ? R("div", {
-                    key: "placeholder",
-                    style: { color: "#DDD", position: "absolute", top: 0, left: 0, right: 0, pointerEvents: "none" },
-                }, "Click to Edit")
-                : undefined);
+            return (react_1.default.createElement("div", { key: "contents", style: this.props.style, className: this.props.className },
+                react_1.default.createElement(expressions_ui_1.ContentEditableComponent, { ref: this.refContentEditable, style: { outline: "none" }, html: this.createHtml(), onChange: this.handleChange, onClick: this.handleEditorClick, onFocus: this.handleFocus, onBlur: this.handleBlur }),
+                this.props.items?.[0] == null ? (react_1.default.createElement("div", { key: "placeholder", style: { color: "#DDD", position: "absolute", top: 0, left: 0, right: 0, pointerEvents: "none" } }, "Click to Edit")) : undefined));
         }
         else {
-            return R("div", {
-                key: "contents",
-                style: this.props.style,
-                className: this.props.className,
-                dangerouslySetInnerHTML: { __html: this.createHtml() },
-            });
+            return (react_1.default.createElement("div", { key: "contents", style: this.props.style, className: this.props.className, dangerouslySetInnerHTML: { __html: this.createHtml() } }));
         }
     }
     render() {
-        return R("div", {
-            style: { position: "relative" },
-            ref: (c) => {
+        return (react_1.default.createElement("div", { style: { position: "relative" }, ref: (c) => {
                 this.entireComponent = c;
-            },
-        }, this.renderHtml(), this.state.focused ? this.renderPalette() : undefined);
+            } },
+            this.renderHtml(),
+            this.state.focused ? this.renderPalette() : undefined));
     }
 }
 exports.default = RichTextComponent;
-var removeFormatIcon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAACpF6WWAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAr0lEQVQ4y91U2w3CMAy8VB0kbFA2YYVuABOZbsAmGaFscnzgSlGSBgfCB1g6OXbkkx+yHUn0lgFfkN8hHSt/lma71kxdhIv6Dom/HGicflB97NVTD2ACsPQc1En1zUpqKb+pdEumzaVbSNPSRRFL7iNZQ1BstvApsmODZJXUa8A58W9Ea4nwFWkNa0Sc/Q+F1dyDRD30AO6qJV/wtgxNPR3fOEJXALO+5092/0+P9APt7i9xOIlepwAAAABJRU5ErkJggg==";

package/lib/valueFormatter.js

@@ -7,6 +7,7 @@ exports.formatValue = exports.getDefaultFormat = exports.getFormatOptions = expo
 const d3_format_1 = require("d3-format");
 const utm_1 = require("utm");
 const dayjs_1 = __importDefault(require("./dayjs"));
+const wellknown_1 = require("./wellknown");
 /** Determine if can format type */
 function canFormatType(type) {
     return type == "number" || type == "geometry" || type === "date" || type === "datetime";
@@ -29,7 +30,8 @@ function getFormatOptions(type) {
     if (type == "geometry") {
         return [
             { value: "lat, lng", label: "Latitude, Longitude" },
-            { value: "UTM", label: "UTM" }
+            { value: "UTM", label: "UTM" },
+            { value: "WKT", label: "Well-Known Text" }
         ];
     }
     if (type == "date") {
@@ -126,6 +128,9 @@ function formatValue(type, value, format, locale, legacyPercentFormat) {
             }
             return value.type;
         }
+        else if (format == "WKT") {
+            return (0, wellknown_1.stringify)(value);
+        }
         else {
             // Display as lat/lng if Point, otherwise type
             if (value.type == "Point") {

package/lib/wellknown.d.ts

@@ -0,0 +1,5 @@
+export declare function parse(input: string): any;
+/**
+ * Stringifies a GeoJSON object into WKT
+ */
+export declare function stringify(gj: any): string;