@mwater/visualization 5.4.1 → 5.4.3

package/lib/quickfilter/QuickfiltersDesignComponent.d.ts

@@ -12,35 +12,10 @@ export interface QuickfiltersDesignComponentProps {
     tables: string[];
 }
 export default class QuickfiltersDesignComponent extends React.Component<QuickfiltersDesignComponentProps> {
-    handleDesignChange: (design: any) => void;
-    isMergeable(design: any, index: any): boolean;
-    renderQuickfilter: (item: any, index: any) => React.CElement<any, QuickfilterDesignComponent>;
+    handleDesignChange: (design: Quickfilter[]) => void;
+    isMergeable(design: Quickfilter[], index: number): boolean;
+    renderQuickfilter: (item: Quickfilter, index: number) => React.JSX.Element;
     handleAdd: () => void;
-    handleRemove: (index: any) => void;
-    render(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+    handleRemove: (index: number) => void;
+    render(): React.JSX.Element;
 }
-interface QuickfilterDesignComponentProps {
-    /** Design of a single quickfilters. See README.md */
-    design: Quickfilter;
-    onChange: (design: Quickfilter) => void;
-    onRemove: () => void;
-    /** True if can be merged */
-    mergeable?: boolean;
-    schema: Schema;
-    dataSource: DataSource;
-    tables: string[];
-}
-interface QuickfilterDesignComponentState {
-    table: any;
-}
-/** Single quickfilter design component */
-declare class QuickfilterDesignComponent extends React.Component<QuickfilterDesignComponentProps, QuickfilterDesignComponentState> {
-    constructor(props: any);
-    handleTableChange: (table: any) => void;
-    handleExprChange: (expr: any) => void;
-    handleLabelChange: (ev: any) => void;
-    handleMergedChange: (merged: any) => void;
-    handleMultiChange: (multi: any) => void;
-    render(): React.DetailedReactHTMLElement<{}, HTMLElement>;
-}
-export {};

package/lib/quickfilter/QuickfiltersDesignComponent.js

@@ -28,8 +28,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const lodash_1 = __importDefault(require("lodash"));
 const react_1 = __importDefault(require("react"));
-const R = react_1.default.createElement;
-const update_object_1 = __importDefault(require("update-object"));
+const uuid_1 = __importDefault(require("uuid"));
+const immer_1 = require("immer");
 const expressions_ui_1 = require("@mwater/expressions-ui");
 const expressions_1 = require("@mwater/expressions");
 const ui = __importStar(require("@mwater/react-library/lib/bootstrap"));
@@ -37,14 +37,22 @@ const ListEditorComponent_1 = require("@mwater/react-library/lib/ListEditorCompo
 // Displays quick filters and allows their value to be modified
 class QuickfiltersDesignComponent extends react_1.default.Component {
     handleDesignChange = (design) => {
-        design = design.slice();
-        // Update merged, clearing if not mergeable
-        for (let index = 0, end = design.length, asc = 0 <= end; asc ? index < end : index > end; asc ? index++ : index--) {
-            if (design[index].merged && !this.isMergeable(design, index)) {
-                design[index] = lodash_1.default.extend({}, design[index], { merged: false });
+        // Use immer produce to create immutable update
+        const newDesign = (0, immer_1.produce)(design, draft => {
+            // Add UUID if missing
+            for (let i = 0; i < draft.length; i++) {
+                if (!draft[i].id) {
+                    draft[i].id = uuid_1.default.v4();
+                }
             }
-        }
-        return this.props.onDesignChange(design);
+            // Update merged flag, clearing if not mergeable
+            for (let i = 0; i < draft.length; i++) {
+                if (draft[i].merged && !this.isMergeable(draft, i)) {
+                    draft[i].merged = false;
+                }
+            }
+        });
+        this.props.onDesignChange(newDesign);
     };
     // Determine if quickfilter at index is mergeable with previous (same type, id table and enum values)
     isMergeable(design, index) {
@@ -75,35 +83,28 @@ class QuickfiltersDesignComponent extends react_1.default.Component {
         return true;
     }
     renderQuickfilter = (item, index) => {
-        return R(QuickfilterDesignComponent, {
-            key: index,
-            design: item,
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            tables: this.props.tables,
-            mergeable: this.isMergeable(this.props.design, index),
-            onChange: (newItem) => {
+        return react_1.default.createElement(QuickfilterDesignComponent, { key: index, design: item, schema: this.props.schema, dataSource: this.props.dataSource, tables: this.props.tables, mergeable: this.isMergeable(this.props.design, index), onChange: (newItem) => {
                 const design = this.props.design.slice();
                 design[index] = newItem;
                 return this.handleDesignChange(design);
-            },
-            onRemove: this.handleRemove.bind(null, index)
-        });
+            }, onRemove: this.handleRemove.bind(null, index) });
     };
     handleAdd = () => {
         // Add blank to end
         const design = this.props.design.concat([{ expr: null }]);
-        return this.props.onDesignChange(design);
+        this.props.onDesignChange(design);
     };
     handleRemove = (index) => {
         const design = this.props.design.slice();
         design.splice(index, 1);
-        return this.props.onDesignChange(design);
+        this.props.onDesignChange(design);
     };
     render() {
-        return R("div", null, react_1.default.createElement(ListEditorComponent_1.ListEditorComponent, { items: this.props.design, onItemsChange: this.handleDesignChange, renderItem: this.renderQuickfilter, getReorderableKey: (item, index) => index }), this.props.tables.length > 0
-            ? R("button", { type: "button", className: "btn btn-sm btn-link", onClick: this.handleAdd }, R("span", { className: "fas fa-plus" }), T `Add Quick Filter`)
-            : undefined);
+        return (react_1.default.createElement("div", null,
+            react_1.default.createElement(ListEditorComponent_1.ListEditorComponent, { items: this.props.design, onItemsChange: this.handleDesignChange, renderItem: this.renderQuickfilter, getReorderableKey: (item, index) => item.id || index }),
+            this.props.tables.length > 0 ? (react_1.default.createElement("button", { type: "button", className: "btn btn-sm btn-link", onClick: this.handleAdd },
+                react_1.default.createElement("span", { className: "fas fa-plus me-1" }),
+                T `Add Quick Filter`)) : undefined));
     }
 }
 exports.default = QuickfiltersDesignComponent;
@@ -124,53 +125,45 @@ class QuickfilterDesignComponent extends react_1.default.Component {
         return this.props.onChange(design);
     };
     handleExprChange = (expr) => {
-        return this.props.onChange((0, update_object_1.default)(this.props.design, { expr: { $set: expr } }));
+        this.props.onChange((0, immer_1.produce)(this.props.design, draft => {
+            draft.expr = expr;
+        }));
     };
     handleLabelChange = (ev) => {
-        return this.props.onChange((0, update_object_1.default)(this.props.design, { label: { $set: ev.target.value } }));
+        this.props.onChange((0, immer_1.produce)(this.props.design, draft => {
+            draft.label = ev.target.value;
+        }));
     };
     handleMergedChange = (merged) => {
-        return this.props.onChange((0, update_object_1.default)(this.props.design, { merged: { $set: merged } }));
+        this.props.onChange((0, immer_1.produce)(this.props.design, draft => {
+            draft.merged = merged;
+        }));
     };
     handleMultiChange = (multi) => {
-        return this.props.onChange((0, update_object_1.default)(this.props.design, { multi: { $set: multi } }));
+        this.props.onChange((0, immer_1.produce)(this.props.design, draft => {
+            draft.multi = multi;
+        }));
     };
     render() {
         // Determine type of expression
         const exprType = new expressions_1.ExprUtils(this.props.schema).getExprType(this.props.design.expr);
-        return R("div", {}, R("div", { className: "mb-3 mt-1", key: "table" }, R("label", { className: "text-muted" }, T `Data Source`), R(ui.Select, {
-            value: this.state.table,
-            options: lodash_1.default.map(this.props.tables, (table) => ({
-                value: table,
-                label: expressions_1.ExprUtils.localizeString(this.props.schema.getTable(table).name)
-            })),
-            onChange: this.handleTableChange,
-            nullLabel: T `Select...`
-        })), R("div", { className: "mb-3", key: "expr" }, R("label", { className: "text-muted" }, T `Filter By`), R("div", null, R(expressions_ui_1.ExprComponent, {
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            table: this.state.table,
-            value: this.props.design.expr,
-            onChange: this.handleExprChange,
-            types: ["enum", "text", "enumset", "date", "datetime", "id[]", "text[]"],
-        }))), this.props.design.expr
-            ? R("div", { className: "mb-3", key: "label" }, R("label", { className: "text-muted" }, T `Label`), R("input", {
-                type: "text",
-                className: "form-control form-control-sm",
-                value: this.props.design.label || "",
-                onChange: this.handleLabelChange,
-                placeholder: T `Optional Label`
-            }))
-            : undefined, this.props.mergeable
-            ? R(ui.Checkbox, {
-                value: this.props.design.merged,
-                onChange: this.handleMergedChange
-            }, T `Merge with previous quickfilter `, R("span", { className: "text-muted" }, T `- displays as one single control that filters both`))
-            : undefined, ["enum", "text", "enumset", "id[]", "text[]"].includes(exprType)
-            ? R(ui.Checkbox, {
-                value: this.props.design.multi,
-                onChange: this.handleMultiChange
-            }, T `Allow multiple selections`)
-            : undefined);
+        return (react_1.default.createElement("div", null,
+            react_1.default.createElement("div", { className: "mb-3 mt-1", key: "table" },
+                react_1.default.createElement("label", { className: "text-muted" }, T `Data Source`),
+                react_1.default.createElement(ui.Select, { value: this.state.table, options: lodash_1.default.map(this.props.tables, (table) => ({
+                        value: table,
+                        label: expressions_1.ExprUtils.localizeString(this.props.schema.getTable(table).name)
+                    })), onChange: this.handleTableChange, nullLabel: T `Select...` })),
+            react_1.default.createElement("div", { className: "mb-3", key: "expr" },
+                react_1.default.createElement("label", { className: "text-muted" }, T `Filter By`),
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement(expressions_ui_1.ExprComponent, { schema: this.props.schema, dataSource: this.props.dataSource, table: this.state.table, value: this.props.design.expr, onChange: this.handleExprChange, types: ["enum", "text", "enumset", "date", "datetime", "id[]", "text[]"] }))),
+            this.props.design.expr ? (react_1.default.createElement("div", { className: "mb-3", key: "label" },
+                react_1.default.createElement("label", { className: "text-muted" }, T `Label`),
+                react_1.default.createElement("input", { type: "text", className: "form-control form-control-sm", value: this.props.design.label || "", onChange: this.handleLabelChange, placeholder: T `Optional Label` }))) : undefined,
+            this.props.mergeable ? (react_1.default.createElement(ui.Checkbox, { value: this.props.design.merged, onChange: this.handleMergedChange },
+                T `Merge with previous quickfilter `,
+                react_1.default.createElement("span", { className: "text-muted" }, `- ${T `displays as one single control that filters both`}`))) : undefined,
+            ["enum", "text", "enumset", "id[]", "text[]"].includes(exprType) ? (react_1.default.createElement(ui.Checkbox, { value: this.props.design.multi, onChange: this.handleMultiChange }, T `Allow multiple selections`)) : undefined));
     }
 }

package/lib/richtext/ExprItemsHtmlConverter.d.ts

@@ -1,5 +1,6 @@
-import ItemsHtmlConverter, { HtmlItemBase } from "./ItemsHtmlConverter";
+import ItemsHtmlConverter, { HtmlItem, HtmlItemBase } from "./ItemsHtmlConverter";
 import { Expr, Schema } from "@mwater/expressions";
+/** Html item that is an expression */
 export interface HtmlItemExpr extends HtmlItemBase {
     type: "expr";
     /** unique id */
@@ -13,6 +14,8 @@ export interface HtmlItemExpr extends HtmlItemBase {
     /** d3 format if number */
     format?: string;
 }
+/** Html item that is an expression or a normal item */
+export type HtmlItemOrExpr = HtmlItem | HtmlItemExpr;
 /**
  * ItemsHtmlConverter that supports embedded mwater expressions
  * Converts items (JSON contents of rich text) to HTML and back to allow editing
@@ -35,5 +38,5 @@ export default class ExprItemsHtmlConverter extends ItemsHtmlConverter {
         [key: string]: string;
     }, locale?: string);
     convertSpecialItemToHtml(item: HtmlItemBase): string;
-    convertElemToItems(elem: HTMLElement): import("./ItemsHtmlConverter").HtmlItem[];
+    convertElemToItems(elem: HTMLElement): HtmlItem[];
 }

package/lib/richtext/ExprItemsHtmlConverter.js

@@ -46,7 +46,7 @@ class ExprItemsHtmlConverter extends ItemsHtmlConverter_1.default {
             if (this.summarizeExprs) {
                 text = new expressions_1.ExprUtils(this.schema).summarizeExpr(exprItem.expr, this.locale);
                 if (text.length > 30) {
-                    text = text.substr(0, 30) + T `...`;
+                    text = text.substr(0, 30) + `...`;
                 }
                 exprHtml = lodash_1.default.escape(text);
             }
@@ -67,7 +67,7 @@ class ExprItemsHtmlConverter extends ItemsHtmlConverter_1.default {
                     exprHtml = lodash_1.default.escape(text);
                 }
                 else {
-                    exprHtml = `<span style="color: #DDD">${T `---`}</span>`;
+                    exprHtml = `<span style="color: #DDD">${`---`}</span>`;
                 }
             }
             else {
@@ -76,13 +76,13 @@ class ExprItemsHtmlConverter extends ItemsHtmlConverter_1.default {
             }
             // Add label
             if (exprItem.includeLabel) {
-                const label = exprItem.labelText || new expressions_1.ExprUtils(this.schema).summarizeExpr(exprItem.expr, this.locale) + T `:\u00A0`;
+                const label = exprItem.labelText || new expressions_1.ExprUtils(this.schema).summarizeExpr(exprItem.expr, this.locale) + `:\u00A0`;
                 exprHtml = `<span class="text-muted">${lodash_1.default.escape(label)}</span>` + exprHtml;
             }
             if (this.designMode) {
                 html +=
                     `\u2060<span data-embed="${lodash_1.default.escape(JSON.stringify(item))}" class="mwater-visualization-text-widget-expr">` +
-                        (exprHtml || T `\u00A0`) +
+                        (exprHtml || `\u00A0`) +
                         `</span>\u2060`;
             }
             else {

package/lib/richtext/ExprItemsTranslator.d.ts

@@ -0,0 +1,5 @@
+import { HtmlItemOrExpr } from "./ExprItemsHtmlConverter";
+/** Gets all unique strings from html items */
+export declare function getHtmlItemsStrings(items: HtmlItemOrExpr[]): string[];
+/** Translates items in an html items list with expressions */
+export declare function translateHtmlItems(items: HtmlItemOrExpr[], translate: (input: string) => string): HtmlItemOrExpr[];

package/lib/richtext/ExprItemsTranslator.js

@@ -0,0 +1,149 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getHtmlItemsStrings = getHtmlItemsStrings;
+exports.translateHtmlItems = translateHtmlItems;
+const lodash_1 = __importDefault(require("lodash"));
+const immer_1 = require("immer");
+const ItemsHtmlConverter_1 = __importDefault(require("./ItemsHtmlConverter"));
+/** Gets all unique strings from html items */
+function getHtmlItemsStrings(items) {
+    const strings = new Set();
+    // Create collector function that just saves strings and returns them unchanged
+    const collectStrings = (str) => {
+        // Only collect non-empty strings
+        if (str) {
+            strings.add(str);
+        }
+        return str;
+    };
+    // Use existing translation function but with collector
+    translateHtmlItems(items, collectStrings);
+    return Array.from(strings);
+}
+/** Translates items in an html items list with expressions */
+function translateHtmlItems(items, translate) {
+    return (0, immer_1.produce)(items, draft => {
+        function translateItems(itemList) {
+            // Accumulate simple items
+            let simpleItems = [];
+            let simpleItemStartIndex = null;
+            /** Process accumulated simple nodes which are simple inline elements */
+            function processSimpleNodes() {
+                if (simpleItems.length === 0) {
+                    return;
+                }
+                // Create html string with {0}, {1}, etc. for expressions and html for other items
+                const expressions = [];
+                const converter = new TranslationItemsHtmlConverter(item => {
+                    if (item.type === "expr") {
+                        const expr = item;
+                        if (expr.labelText) {
+                            expr.labelText = translate(expr.labelText);
+                        }
+                        expressions.push(expr);
+                        return `{${expressions.length - 1}}`;
+                    }
+                    return "";
+                });
+                // Convert items to html which has the side effect of translating expressions
+                let html = converter.convertItemsToHtml(simpleItems);
+                // If there was no text, do nothing except translate expressions
+                if (!simpleItems.some(doesItemContainText)) {
+                    return;
+                }
+                // Remove leading and trailing whitespace from the HTML
+                const leftWhitespace = html.slice(0, html.length - html.trimStart().length);
+                const rightWhitespace = html.slice(html.trimEnd().length);
+                html = html.trim();
+                if (!html) {
+                    return;
+                }
+                let translatedHtml = leftWhitespace + translate(html) + rightWhitespace;
+                // Parse translatedHtml into items by first replacing {0}, {1}, etc. with html that can be converted to items
+                for (let i = 0; i < expressions.length; i++) {
+                    const expr = expressions[i];
+                    translatedHtml = translatedHtml.replace(new RegExp(`\\{${i}\\}`, "g"), `<span data-embed="${lodash_1.default.escape(JSON.stringify(expr))}"></span>`);
+                }
+                // Wrap in a div to prevent whitespace from being trimmed.
+                const translatedItems = (converter.convertElemToItems(new DOMParser().parseFromString("<div>" + translatedHtml + "</div>", "text/html").body.firstChild));
+                // Replace the simple items with the translated items
+                itemList.splice(simpleItemStartIndex, simpleItems.length, ...translatedItems);
+                simpleItems = [];
+                simpleItemStartIndex = null;
+            }
+            for (let i = 0; i < itemList.length; i++) {
+                const item = itemList[i];
+                // If the child is a simple node, add it to the list
+                if (isItemSimple(item)) {
+                    simpleItems.push(item);
+                    if (simpleItemStartIndex == null) {
+                        simpleItemStartIndex = i;
+                    }
+                }
+                else {
+                    // If we have gathered simple nodes, we need to return/replace them
+                    processSimpleNodes();
+                    simpleItemStartIndex = null;
+                    simpleItems = [];
+                    // Handle the current node
+                    if (typeof item !== "string" && item.type === "element" && item.items) {
+                        translateItems(item.items);
+                    }
+                }
+            }
+            if (simpleItems.length > 0) {
+                processSimpleNodes();
+                simpleItemStartIndex = null;
+                simpleItems = [];
+            }
+        }
+        translateItems(draft);
+    });
+}
+/** ItemsHtmlConverter that has a callback for handling special items */
+class TranslationItemsHtmlConverter extends ItemsHtmlConverter_1.default {
+    handleSpecialItem;
+    constructor(handleSpecialItem) {
+        super();
+        this.handleSpecialItem = handleSpecialItem;
+    }
+    convertSpecialItemToHtml(item) {
+        return this.handleSpecialItem(item);
+    }
+}
+/**
+ * Check if an html item is simple.
+ * A node is simple if it is:
+ *  - a string
+ *  - a tag that is a "b", "i", "u", "a", "strong", "em" tag with no children or only simple children
+ * Only sequences of simple nodes are exported to translation entries as HTML.
+ */
+function isItemSimple(node) {
+    if (typeof node === "string") {
+        return true;
+    }
+    if (node.type === "expr") {
+        return true;
+    }
+    if (node.type === "element") {
+        const element = node;
+        if (["b", "i", "u", "a", "strong", "em"].indexOf(element.tag) === -1) {
+            return false;
+        }
+        return (element.items || []).every(child => isItemSimple(child));
+    }
+    return false;
+}
+/** Determines if an item contains any non-empty text strings */
+function doesItemContainText(item) {
+    if (typeof item === "string") {
+        return item.trim().length > 0;
+    }
+    if (item.type === "element") {
+        return (item.items || []).some(child => doesItemContainText(child));
+    }
+    return false;
+}

package/lib/richtext/ItemsHtmlConverter.d.ts

@@ -25,7 +25,7 @@ export default class ItemsHtmlConverter {
     constructor(namedStrings?: {
         [key: string]: string;
     });
-    convertItemsToHtml(items: any): string;
+    convertItemsToHtml(items: HtmlItem[]): string;
     convertSpecialItemToHtml(item: HtmlItemBase): string;
     convertElemToItems(elem: HTMLElement): HtmlItem[];
 }

package/lib/richtext/ItemsHtmlConverter.js

@@ -50,18 +50,19 @@ class ItemsHtmlConverter {
                 html += lodash_1.default.escape(itemStr);
             }
             else if (item.type === "element") {
-                if (!allowedTags[item.tag]) {
+                const element = item;
+                if (!allowedTags[element.tag]) {
                     // Ignore and do contents
-                    html += this.convertItemsToHtml(item.items);
+                    html += this.convertItemsToHtml(element.items || []);
                     continue;
                 }
                 let attrs = "";
                 // Add style
-                if (item.style) {
+                if (element.style) {
                     attrs += ' style="';
                     let first = true;
-                    for (let key in item.style) {
-                        const value = item.style[key];
+                    for (let key in element.style) {
+                        const value = element.style[key];
                         if (!allowedStyles[key]) {
                             continue;
                         }
@@ -77,19 +78,19 @@ class ItemsHtmlConverter {
                     attrs += '"';
                 }
                 // Add href
-                if (item.href) {
-                    attrs += ' href="' + item.href + '"';
+                if (element.href) {
+                    attrs += ' href="' + element.href + '"';
                 }
                 // Add target
-                if (item.target) {
-                    attrs += ' target="' + lodash_1.default.escape(item.target) + '"';
+                if (element.target) {
+                    attrs += ' target="' + lodash_1.default.escape(element.target) + '"';
                 }
                 // Special case for self-closing tags
-                if (["br"].includes(item.tag)) {
-                    html += `<${item.tag}${attrs}>`;
+                if (["br"].includes(element.tag)) {
+                    html += `<${element.tag}${attrs}>`;
                 }
                 else {
-                    html += `<${item.tag}${attrs}>` + this.convertItemsToHtml(item.items) + `</${item.tag}>`;
+                    html += `<${element.tag}${attrs}>` + this.convertItemsToHtml(element.items || []) + `</${element.tag}>`;
                 }
             }
             else {
@@ -101,6 +102,8 @@ class ItemsHtmlConverter {
             html = "\u2060";
         }
         // console.log "createHtml: #{html}"
+        // console.log("convertItemsToHtml: " + JSON.stringify(items, null, 2))
+        // console.log("convertItemsToHtml: " + html)
         return html;
     }
     // Converts an item that is not an element to html. Override in subclass.
@@ -138,14 +141,19 @@ class ItemsHtmlConverter {
                 const nodeElement = node;
                 if (nodeElement.style != null) {
                     const styleDeclaration = nodeElement.style;
-                    for (const style of styleDeclaration) {
+                    for (let i = 0; i < styleDeclaration.length; i++) {
+                        const style = styleDeclaration[i];
                         if (!allowedStyles[style]) {
                             continue;
                         }
-                        const value = styleDeclaration[style];
+                        const value = styleDeclaration.getPropertyValue(style);
                         if (value == null || value === "") {
                             continue;
                         }
+                        // Ignore bootstrap variables in style values
+                        if (value.startsWith("var(--bs-")) {
+                            continue;
+                        }
                         item.style = item.style || {};
                         item.style[style] = value;
                     }
@@ -168,7 +176,13 @@ class ItemsHtmlConverter {
                 if (node.target) {
                     item.target = node.target;
                 }
-                items.push(item);
+                // Unwrap pointless span elements that have no style and one child
+                if (tag === "span" && item.style == null && item.items?.length === 1) {
+                    items.push(item.items[0]);
+                }
+                else {
+                    items.push(item);
+                }
                 // Handle text
             }
             else if (node.nodeType === 3) {
@@ -181,6 +195,8 @@ class ItemsHtmlConverter {
             }
         }
         // console.log JSON.stringify(items, null, 2)
+        // console.log("convertElemToItems: " + elem.outerHTML)
+        // console.log("convertElemToItems: " + JSON.stringify(items, null, 2))
         return items;
     }
 }

package/lib/wellknown.js

@@ -23,7 +23,7 @@ exports.parse = parse;
 exports.stringify = stringify;
 const numberRegexp = /[-+]?([0-9]*\.[0-9]+|[0-9]+)([eE][-+]?[0-9]+)?/;
 // Matches sequences like '100 100' or '100 100 100'.
-const tuples = new RegExp('^' + numberRegexp.source + '(\\s' + numberRegexp.source + '){1,}');
+const tuples = new RegExp('^' + numberRegexp.source + '(\\s' + numberRegexp.source + '){1,3}');
 /*
  * Parse WKT and return GeoJSON.
  *
@@ -91,7 +91,9 @@ function parse(input) {
                 stack[stack.length - 1].push(pointer);
             }
             else if (!elem.split(/\s/g).some(s => isNaN(s))) {
-                Array.prototype.push.apply(pointer, elem.split(/\s/g).map(parseFloat));
+                // Split into values and only take first 3 if there are 4 (ZM coordinates)
+                const values = elem.split(/\s/g).map(parseFloat);
+                Array.prototype.push.apply(pointer, values.length === 4 ? values.slice(0, 3) : values);
             }
             else {
                 return null;
@@ -116,7 +118,8 @@ function parse(input) {
             else if (!pt.split(/\s/g).some(s => isNaN(s))) {
                 if (!item)
                     item = [];
-                Array.prototype.push.apply(item, pt.split(/\s/g).map(parseFloat));
+                const values = pt.split(/\s/g).map(parseFloat);
+                Array.prototype.push.apply(item, values.length === 4 ? values.slice(0, 3) : values);
             }
             white();
         }
@@ -127,7 +130,7 @@ function parse(input) {
         return list.length ? list : null;
     }
     function point() {
-        if (!$(/^(point(\sz)?)/i))
+        if (!$(/^(point(\s+zm|\s+z)?)/i))
             return null;
         white();
         if (!$(/^(\()/))
@@ -144,7 +147,7 @@ function parse(input) {
         };
     }
     function multipoint() {
-        if (!$(/^(multipoint(\sz)?)/i))
+        if (!$(/^(multipoint(\s+zm|\s+z)?)/i))
             return null;
         white();
         let newCoordsFormat = _
@@ -162,7 +165,7 @@ function parse(input) {
         };
     }
     function multilinestring() {
-        if (!$(/^(multilinestring(\sz)?)/i))
+        if (!$(/^(multilinestring(\s+zm|\s+z)?)/i))
             return null;
         white();
         let c = multicoords();
@@ -175,7 +178,7 @@ function parse(input) {
         };
     }
     function linestring() {
-        if (!$(/^(linestring(\sz)?)/i))
+        if (!$(/^(linestring(\s+zm|\s+z)?)/i))
             return null;
         white();
         if (!$(/^(\()/))
@@ -191,7 +194,7 @@ function parse(input) {
         };
     }
     function polygon() {
-        if (!$(/^(polygon(\sz)?)/i))
+        if (!$(/^(polygon(\s+zm|\s+z)?)/i))
             return null;
         white();
         let c = multicoords();
@@ -203,7 +206,7 @@ function parse(input) {
         };
     }
     function multipolygon() {
-        if (!$(/^(multipolygon(\sz)?)/i))
+        if (!$(/^(multipolygon(\s+zm|\s+z)?)/i))
             return null;
         white();
         let c = multicoords();

package/lib/widgets/IFrameWidget.d.ts

@@ -2,13 +2,13 @@ import React from "react";
 import Widget, { CreateViewElementOptions } from "./Widget";
 export default class IFrameWidget extends Widget {
     createViewElement(options: CreateViewElementOptions): React.CElement<{
-        design: object;
-        onDesignChange: ((design: object) => void) | null | undefined;
+        design: any;
+        onDesignChange: ((design: any) => void) | null | undefined;
         width: number | undefined;
         height: number | undefined;
     }, React.Component<{
-        design: object;
-        onDesignChange: ((design: object) => void) | null | undefined;
+        design: any;
+        onDesignChange: ((design: any) => void) | null | undefined;
         width: number | undefined;
         height: number | undefined;
     }, any, any>>;