@mwater/visualization 5.4.0 → 5.4.2

package/src/richtext/ExprItemsHtmlConverter.ts

@@ -1,10 +1,11 @@
 import _ from "lodash"
-import ItemsHtmlConverter, { HtmlItemBase } from "./ItemsHtmlConverter"
+import ItemsHtmlConverter, { HtmlItem, HtmlItemBase } from "./ItemsHtmlConverter"
 import { Expr, ExprUtils, Schema } from "@mwater/expressions"
 import uuid from "uuid"
 import { formatValue } from "../valueFormatter"
 import { canFormatType } from "../valueFormatter"
 
+/** Html item that is an expression */
 export interface HtmlItemExpr extends HtmlItemBase {
   type: "expr"
  
@@ -24,6 +25,9 @@ export interface HtmlItemExpr extends HtmlItemBase {
   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
@@ -66,7 +70,7 @@ export default class ExprItemsHtmlConverter extends ItemsHtmlConverter {
       if (this.summarizeExprs) {
         text = new ExprUtils(this.schema).summarizeExpr(exprItem.expr, this.locale)
         if (text.length > 30) {
-          text = text.substr(0, 30) + T`...`
+          text = text.substr(0, 30) + `...`
         }
 
         exprHtml = _.escape(text)
@@ -88,7 +92,7 @@ export default class ExprItemsHtmlConverter extends ItemsHtmlConverter {
 
           exprHtml = _.escape(text)
         } else {
-          exprHtml = `<span style="color: #DDD">${T`---`}</span>`
+          exprHtml = `<span style="color: #DDD">${`---`}</span>`
         }
       } else {
         // Placeholder
@@ -97,14 +101,14 @@ export default class ExprItemsHtmlConverter extends ItemsHtmlConverter {
 
       // Add label
       if (exprItem.includeLabel) {
-        const label = exprItem.labelText || new ExprUtils(this.schema).summarizeExpr(exprItem.expr, this.locale) + T`:\u00A0`
+        const label = exprItem.labelText || new ExprUtils(this.schema).summarizeExpr(exprItem.expr, this.locale) + `:\u00A0`
         exprHtml = `<span class="text-muted">${_.escape(label)}</span>` + exprHtml
       }
 
       if (this.designMode) {
         html +=
           `\u2060<span data-embed="${_.escape(JSON.stringify(item))}" class="mwater-visualization-text-widget-expr">` +
-          (exprHtml || T`\u00A0`) +
+          (exprHtml || `\u00A0`) +
           `</span>\u2060`
       } else {
         // View mode

package/src/richtext/ExprItemsTranslator.ts

@@ -0,0 +1,176 @@
+import _ from "lodash"
+import { HtmlItemExpr, HtmlItemOrExpr } from "./ExprItemsHtmlConverter"
+import { produce } from "immer"
+import ItemsHtmlConverter, { HtmlItem, HtmlItemBase, HtmlItemElement } from "./ItemsHtmlConverter"
+
+/** Gets all unique strings from html items */
+export function getHtmlItemsStrings(items: HtmlItemOrExpr[]): string[] {
+  const strings = new Set<string>()
+  
+  // Create collector function that just saves strings and returns them unchanged
+  const collectStrings = (str: string) => {
+    // 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 */
+export function translateHtmlItems(items: HtmlItemOrExpr[], translate: (input: string) => string): HtmlItemOrExpr[] {
+  return produce(items, draft => {
+    function translateItems(itemList: HtmlItemOrExpr[]) {
+      // Accumulate simple items
+      let simpleItems: HtmlItemOrExpr[] = []
+      let simpleItemStartIndex: number | null = 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: HtmlItemExpr[] = []
+
+        const converter = new TranslationItemsHtmlConverter(item => {
+          if (item.type === "expr") {
+            const expr = item as HtmlItemExpr
+            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="${_.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 as HTMLElement))
+
+        // 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 {
+  handleSpecialItem: (item: HtmlItemBase) => string
+  
+  constructor(handleSpecialItem: (item: HtmlItemBase) => string) {
+    super()
+    this.handleSpecialItem = handleSpecialItem
+  }
+
+  convertSpecialItemToHtml(item: HtmlItemBase) {
+    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: HtmlItemOrExpr): boolean {
+  if (typeof node === "string") {
+    return true
+  }
+
+  if (node.type === "expr") {
+    return true
+  }
+
+  if (node.type === "element") {
+    const element = node as HtmlItemElement
+
+    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: HtmlItemOrExpr): boolean {
+  if (typeof item === "string") {
+    return item.trim().length > 0
+  }
+
+  if (item.type === "element") {
+    return (item.items || []).some(child => doesItemContainText(child))
+  }
+
+  return false
+}

package/src/richtext/ItemsHtmlConverter.ts

@@ -47,7 +47,7 @@ export default class ItemsHtmlConverter {
   }
 
   // Converts list of items to html
-  convertItemsToHtml(items: any) {
+  convertItemsToHtml(items: HtmlItem[]) {
     let html = ""
 
     for (let item of items || []) {
@@ -66,19 +66,20 @@ export default class ItemsHtmlConverter {
         // Escape HTML
         html += _.escape(itemStr)
       } else if (item.type === "element") {
-        if (!allowedTags[item.tag]) {
+        const element = item as HtmlItemElement
+        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
             }
@@ -97,20 +98,20 @@ export default class ItemsHtmlConverter {
         }
 
         // Add href
-        if (item.href) {
-          attrs += ' href="' + item.href + '"'
+        if (element.href) {
+          attrs += ' href="' + element.href + '"'
         }
 
         // Add target
-        if (item.target) {
-          attrs += ' target="' + _.escape(item.target) + '"'
+        if (element.target) {
+          attrs += ' target="' + _.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 {
         html += this.convertSpecialItemToHtml(item)
@@ -123,6 +124,8 @@ export default class ItemsHtmlConverter {
     }
 
     // console.log "createHtml: #{html}"
+    // console.log("convertItemsToHtml: " + JSON.stringify(items, null, 2))
+    // console.log("convertItemsToHtml: " + html)
     return html
   }
 
@@ -168,16 +171,22 @@ export default class ItemsHtmlConverter {
         const nodeElement = node as HTMLElement
         if (nodeElement.style != null) {
           const styleDeclaration = nodeElement.style
-          for (const style of styleDeclaration) {
-            if (!allowedStyles[style as string]) {
+          for (let i = 0; i < styleDeclaration.length; i++) {
+            const style = styleDeclaration[i]
+            if (!allowedStyles[style]) {
               continue
             }
 
-            const value = styleDeclaration[style as any]
+            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
           }
@@ -203,7 +212,12 @@ export default class ItemsHtmlConverter {
           item.target = (node as HTMLLinkElement).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) {
@@ -218,7 +232,8 @@ export default 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/src/wellknown.ts

@@ -21,7 +21,7 @@ OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
 
 const numberRegexp: RegExp = /[-+]?([0-9]*\.[0-9]+|[0-9]+)([eE][-+]?[0-9]+)?/;
 // Matches sequences like '100 100' or '100 100 100'.
-const tuples: RegExp = new RegExp('^' + numberRegexp.source + '(\\s' + numberRegexp.source + '){1,}');
+const tuples: RegExp = new RegExp('^' + numberRegexp.source + '(\\s' + numberRegexp.source + '){1,3}');
 
 /*
  * Parse WKT and return GeoJSON.
@@ -61,12 +61,12 @@ export function parse(input: string): any {
   function white(): void { $(/^\s*/); }
 
   function multicoords(): any[] | null {
-    white();
-    let depth: number = 0;
-    let rings: any[] = [];
-    let stack: any[][] = [rings];
-    let pointer: any[] = rings;
-    let elem: string | null;
+    white()
+    let depth: number = 0
+    let rings: any[] = []
+    let stack: any[][] = [rings]
+    let pointer: any[] = rings
+    let elem: string | null
 
     while (elem =
       $(/^(\()/) ||
@@ -74,33 +74,35 @@ export function parse(input: string): any {
       $(/^(,)/) ||
       $(tuples)) {
       if (elem === '(') {
-        stack.push(pointer);
-        pointer = [];
-        stack[stack.length - 1].push(pointer);
-        depth++;
+        stack.push(pointer)
+        pointer = []
+        stack[stack.length - 1].push(pointer)
+        depth++
       } else if (elem === ')') {
         // For the case: Polygon(), ...
-        if (pointer.length === 0) return null;
+        if (pointer.length === 0) return null
 
-        pointer = stack.pop() || [];
+        pointer = stack.pop() || []
         // the stack was empty, input was malformed
-        if (!pointer) return null;
-        depth--;
-        if (depth === 0) break;
+        if (!pointer) return null
+        depth--
+        if (depth === 0) break
       } else if (elem === ',') {
-        pointer = [];
-        stack[stack.length - 1].push(pointer);
+        pointer = []
+        stack[stack.length - 1].push(pointer)
       } else if (!elem.split(/\s/g).some(s => isNaN(s as any))) {
-        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;
+        return null
       }
-      white();
+      white()
     }
 
-    if (depth !== 0) return null;
+    if (depth !== 0) return null
 
-    return rings;
+    return rings
   }
 
   function coords(): any[] | null {
@@ -115,7 +117,8 @@ export function parse(input: string): any {
         item = [];
       } else if (!pt.split(/\s/g).some(s => isNaN(s as any))) {
         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 @@ export function parse(input: string): any {
   }
 
   function point(): any | null {
-    if (!$(/^(point(\sz)?)/i)) return null;
+    if (!$(/^(point(\s+zm|\s+z)?)/i)) return null;
     white();
     if (!$(/^(\()/)) return null;
     let c: any[] | null = coords();
@@ -141,7 +144,7 @@ export function parse(input: string): any {
   }
 
   function multipoint(): any | null {
-    if (!$(/^(multipoint(\sz)?)/i)) return null;
+    if (!$(/^(multipoint(\s+zm|\s+z)?)/i)) return null;
     white();
     let newCoordsFormat: string = _!
       .substring(_!.indexOf('(') + 1, _!.length - 1)
@@ -158,7 +161,7 @@ export function parse(input: string): any {
   }
 
   function multilinestring(): any | null {
-    if (!$(/^(multilinestring(\sz)?)/i)) return null;
+    if (!$(/^(multilinestring(\s+zm|\s+z)?)/i)) return null;
     white();
     let c: any[] | null = multicoords();
     if (!c) return null;
@@ -170,7 +173,7 @@ export function parse(input: string): any {
   }
 
   function linestring(): any | null {
-    if (!$(/^(linestring(\sz)?)/i)) return null;
+    if (!$(/^(linestring(\s+zm|\s+z)?)/i)) return null;
     white();
     if (!$(/^(\()/)) return null;
     let c: any[] | null = coords();
@@ -183,7 +186,7 @@ export function parse(input: string): any {
   }
 
   function polygon(): any | null {
-    if (!$(/^(polygon(\sz)?)/i)) return null;
+    if (!$(/^(polygon(\s+zm|\s+z)?)/i)) return null;
     white();
     let c: any[] | null = multicoords();
     if (!c) return null;
@@ -194,7 +197,7 @@ export function parse(input: string): any {
   }
 
   function multipolygon(): any | null {
-    if (!$(/^(multipolygon(\sz)?)/i)) return null;
+    if (!$(/^(multipolygon(\s+zm|\s+z)?)/i)) return null;
     white();
     let c: any[] | null = multicoords();
     if (!c) return null;

package/src/widgets/ImageWidget.ts

@@ -62,7 +62,8 @@ export default class ImageWidget extends Widget {
       onDesignChange: options.onDesignChange,
       width: options.width,
       height: options.height,
-      singleRowTable: options.singleRowTable
+      singleRowTable: options.singleRowTable,
+      translate: options.translate
     })
   }
 
@@ -144,4 +145,12 @@ export default class ImageWidget extends Widget {
 
     return []
   }
+
+  getTranslatableStrings(design: ImageWidgetDesign, schema: Schema): string[] {
+    const strings: string[] = []
+    if (design.caption) {
+      strings.push(design.caption)
+    }
+    return strings
+  }
 }

package/src/widgets/ImageWidgetComponent.ts

@@ -29,6 +29,7 @@ export interface ImageWidgetComponentProps {
   width: number
   height: number
   singleRowTable?: string
+  translate: (input: string) => string
 }
 
 export default class ImageWidgetComponent extends AsyncLoadComponent<ImageWidgetComponentProps, { data: any, loading: boolean }> {
@@ -154,9 +155,9 @@ export default class ImageWidgetComponent extends AsyncLoadComponent<ImageWidget
               className: "mwater-visualization-image-widget",
               style: { position: "relative", width: this.props.width, height: this.props.height }
             },
-            captionPosition === "top" ? R("div", { className: "caption" }, this.props.design.caption) : undefined,
+            captionPosition === "top" && this.props.design.caption ? R("div", { className: "caption" }, this.props.translate(this.props.design.caption)) : undefined,
             R("div", { className: "image" }, this.renderContent()),
-            captionPosition === "bottom" ? R("div", { className: "caption" }, this.props.design.caption) : undefined
+            captionPosition === "bottom" && this.props.design.caption ? R("div", { className: "caption" }, this.props.translate(this.props.design.caption)) : undefined
           )
     )
   }