@mwater/visualization 5.2.0 → 5.3.0

package/src/richtext/RichTextComponent.tsx

@@ -1,16 +1,15 @@
-import React, { ReactNode } from "react"
-const R = React.createElement
+import React, { ReactNode, CSSProperties, MouseEvent } from "react"
 import _ from "lodash"
 import { ContentEditableComponent } from "@mwater/expressions-ui"
 import ItemsHtmlConverter, { HtmlItem } from "./ItemsHtmlConverter"
 import FloatAffixed from "react-float-affixed"
 import FontColorPaletteItem from "./FontColorPaletteItem"
-import FontSizePaletteItem from "./FontSizePaletteItem"
+import DropdownPaletteItem from "./DropdownPaletteItem"
 
 export interface RichTextComponentProps {
   // Items (content) to display. See ItemsHtmlConverter
   items?: HtmlItem[]
-  onItemsChange: (items: HtmlItem[]) => void
+  onItemsChange?: (items: HtmlItem[]) => void
 
   onItemClick?: (item: HtmlItem) => void
 
@@ -18,7 +17,7 @@ export interface RichTextComponentProps {
   className?: string
 
   /** Optional style of editor wrapper */
-  style?: any
+  style?: CSSProperties
 
   /** Converter to use for editing */
   itemsHtmlConverter?: ItemsHtmlConverter
@@ -30,17 +29,25 @@ export interface RichTextComponentProps {
   extraPaletteButtons?: ReactNode
 }
 
-export default class RichTextComponent extends React.Component<RichTextComponentProps, { focused: boolean }> {
+interface RichTextComponentState {
+  focused: boolean
+}
+
+export default class RichTextComponent extends React.Component<RichTextComponentProps, RichTextComponentState> {
   static defaultProps = {
     includeHeadings: true,
     items: [],
     itemsHtmlConverter: new ItemsHtmlConverter(),
   }
-  entireComponent: HTMLElement | null
-  contentEditable: ContentEditableComponent | null
-  paletteComponent: HTMLElement | null
+  entireComponent: HTMLElement | null = null
+  contentEditable: ContentEditableComponent | null = null
+  paletteComponent: HTMLElement | null = null
+
+  /** Number of changes in progress. Used with beginChanges and endChanges
+   * to prevent onChange being called during a change */
+  changesInProgress: number = 0
 
-  constructor(props: any) {
+  constructor(props: RichTextComponentProps) {
     super(props)
 
     this.state = {
@@ -48,18 +55,18 @@ export default class RichTextComponent extends React.Component<RichTextComponent
     }
   }
 
-  handleClick = (ev: any) => {
+  handleClick = (ev: MouseEvent) => {
     // If click is in component or in palette component, ignore, otherwise remove focus
     if (
-      !this.entireComponent!.contains(ev.target) &&
-      (!this.paletteComponent || !this.paletteComponent.contains(ev.target))
+      !this.entireComponent!.contains(ev.target as Node) &&
+      (!this.paletteComponent || !this.paletteComponent.contains(ev.target as Node))
     ) {
       return this.setState({ focused: false })
     }
   }
 
   // Paste HTML in
-  pasteHTML(html: any) {
+  pasteHTML(html: string) {
     this.contentEditable!.pasteHTML(html)
   }
 
@@ -67,27 +74,24 @@ export default class RichTextComponent extends React.Component<RichTextComponent
     this.contentEditable!.focus()
   }
 
-  handleInsertExpr = (item: any) => {
-    const html = '<div data-embed="' + _.escape(JSON.stringify(item)) + '"></div>'
-
-    this.contentEditable!.pasteHTML(html)
+  beginChanges() {
+    this.changesInProgress++
   }
 
-  handleSetFontSize = (size: any) => {
-    // Requires a selection
-    let html = this.contentEditable!.getSelectedHTML()
-    if (!html) {
-      return alert("Please select text first to set size")
+  endChanges() {
+    this.changesInProgress--
+    if (this.changesInProgress === 0) {
+      this.handleChange(this.contentEditable!.getEditor())
     }
+  }
 
-    // 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, "")
+  handleInsertExpr = (item: any) => {
+    const html = '<div data-embed="' + _.escape(JSON.stringify(item)) + '"></div>'
 
-    return this.contentEditable!.pasteHTML(`<span style=\"font-size:${size}\">` + html + "</span>")
+    this.contentEditable!.pasteHTML(html)
   }
 
-  handleSetFontColor = (color: any) => {
+  handleSetFontColor = (color: string) => {
     // Requires a selection
     const html = this.contentEditable!.getSelectedHTML()
     if (!html) {
@@ -97,7 +101,66 @@ export default class RichTextComponent extends React.Component<RichTextComponent
     this.handleCommand("foreColor", color)
   }
 
-  handleChange = (elem: any) => {
+  handleSetFontSize = (tag: string, size: string | null) => {
+    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: HTMLElement) => {
+        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] as HTMLElement
+      let endNode = range.endContainer.nodeType === Node.TEXT_NODE ? range.endContainer.parentElement : range.endContainer.childNodes[range.endOffset] as HTMLElement
+
+      // 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: HTMLElement[] = []
+      let node: Node | null = startNode
+      while (node !== null) {
+        if (node.nodeType === Node.ELEMENT_NODE) {
+          rootElements.push(node as HTMLElement)
+        }
+        if (node === endNode) {
+          break
+        }
+        node = node.nextSibling
+      }
+
+      for (const element of rootElements) {
+        applyFontSize(element)
+      }
+    } finally {
+      this.endChanges()
+    }
+  }
+
+  handleChange = (elem: HTMLElement) => {
+    if (this.changesInProgress > 0) {
+      return
+    }
+
     const items = this.props.itemsHtmlConverter!.convertElemToItems(elem)
 
     // Check if changed
@@ -110,14 +173,15 @@ export default class RichTextComponent extends React.Component<RichTextComponent
   }
 
   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: any, param: any, ev?: any) => {
+  handleCommand = (command: string, param: any, ev?: MouseEvent) => {
     // Don't lose focus
     ev?.preventDefault()
 
@@ -125,13 +189,13 @@ export default class RichTextComponent extends React.Component<RichTextComponent
     if (["foreColor"].includes(command)) {
       document.execCommand("styleWithCSS", null as any, true as any)
       document.execCommand(command, false, param)
-      return document.execCommand("styleWithCSS", null as any, false as any)
+      document.execCommand("styleWithCSS", null as any, false as any)
     } else {
-      return document.execCommand(command, false, param)
+      document.execCommand(command, false, param)
     }
   }
 
-  handleCreateLink = (ev: any) => {
+  handleCreateLink = (ev: MouseEvent) => {
     // Don't lose focus
     ev.preventDefault()
 
@@ -142,16 +206,17 @@ export default class RichTextComponent extends React.Component<RichTextComponent
     }
   }
 
-  handleEditorClick = (ev: any) => {
+  handleEditorClick = (ev: MouseEvent) => {
     // Be sure focused
     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 as HTMLElement
+    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)
       }
     }
   }
@@ -173,162 +238,142 @@ export default class RichTextComponent extends React.Component<RichTextComponent
       elem = elem.parentElement
     }
 
-    return R(FloatAffixed, {
-      style: { zIndex },
-      edges: "over,under,left,right",
-      align: "center",
-      render: this.renderPaletteContent,
-    })
+    return (
+      <FloatAffixed
+        style={{ zIndex }}
+        edges="over,under,left,right"
+        align="center"
+        render={this.renderPaletteContent}
+      />
+    )
   }
 
-  renderPaletteContent = (schemeName: any, { edges }: any) => {
-    return R(
-      "div",
-      {
-        key: "palette",
-        className: "mwater-visualization-text-palette",
-        ref: (c: HTMLElement | null) => {
+  renderPaletteContent = (schemeName: string, { edges }: { edges: string }) => {
+    return (
+      <div
+        key="palette"
+        className="mwater-visualization-text-palette"
+        ref={(c: HTMLElement | null) => {
           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, {
-        key: "foreColor",
-        onSetColor: this.handleSetFontColor,
-        position: schemeName === "over" ? "under" : "over",
-      }),
-      R(FontSizePaletteItem, {
-        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
+        }}
+      >
+        <div
+          key="bold"
+          className="mwater-visualization-text-palette-item"
+          onMouseDown={(ev) => this.handleCommand("bold", null, ev)}
+        >
+          <i className="fas fa-bold" />
+        </div>
+        <div
+          key="italic"
+          className="mwater-visualization-text-palette-item"
+          onMouseDown={(ev) => this.handleCommand("italic", null, ev)}
+        >
+          <i className="fas fa-italic" />
+        </div>
+        <div
+          key="underline"
+          className="mwater-visualization-text-palette-item"
+          onMouseDown={(ev) => this.handleCommand("underline", null, ev)}
+        >
+          <i className="fas fa-underline" />
+        </div>
+        <FontColorPaletteItem
+          key="foreColor"
+          onSetColor={this.handleSetFontColor}
+          position={schemeName === "over" ? "under" : "over"}
+        />
+        <div
+          key="link"
+          className="mwater-visualization-text-palette-item"
+          onMouseDown={(ev) => this.handleCreateLink(ev)}
+        >
+          <i className="fas fa-link" />
+        </div>
+        <div
+          key="removeFormat"
+          className="mwater-visualization-text-palette-item"
+          onMouseDown={(ev) => this.handleCommand("removeFormat", null, ev)}
+          style={{ paddingLeft: 5, paddingRight: 5 }}
+        >
+          <i className="fas fa-remove-format" />
+        </div>
+        <DropdownPaletteItem
+          key="justify"
+          items={[
+            { label: <span><i className="fas fa-align-left fa-fw"></i> Left</span>, value: "justifyLeft" },
+            { label: <span><i className="fas fa-align-center fa-fw"></i> Center</span>, value: "justifyCenter" },
+            { label: <span><i className="fas fa-align-right fa-fw"></i> Right</span>, value: "justifyRight" },
+            { label: <span><i className="fas fa-align-justify fa-fw"></i> Justify</span>, value: "justifyFull" },
+          ]}
+          onSelect={(value) => this.handleCommand(value, null)}
+          position={schemeName === "over" ? "under" : "over"}
+          label={<i className="fas fa-align-left" />}
+        />
+        <div
+          key="insertUnorderedList"
+          className="mwater-visualization-text-palette-item"
+          onMouseDown={(ev) => this.handleCommand("insertUnorderedList", null, ev)}
+        >
+          <i className="fas fa-list-ul" />
+        </div>
+        <div
+          key="insertOrderedList"
+          className="mwater-visualization-text-palette-item"
+          onMouseDown={(ev) => this.handleCommand("insertOrderedList", null, ev)}
+        >
+          <i className="fas fa-list-ol" />
+        </div>
+        {this.props.includeHeadings && [
+          <DropdownPaletteItem
+            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={<i className="fas fa-text-size" />}
+          />
+        ]}
+        {this.props.extraPaletteButtons}
+      </div>
     )
   }
 
@@ -338,53 +383,50 @@ export default class RichTextComponent extends React.Component<RichTextComponent
 
   renderHtml() {
     if (this.props.onItemsChange != null) {
-      return R(
-        "div",
-        { key: "contents", style: this.props.style, className: this.props.className },
-        R(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 (
+        <div key="contents" style={this.props.style} className={this.props.className}>
+          <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 ? (
+            <div
+              key="placeholder"
+              style={{ color: "#DDD", position: "absolute", top: 0, left: 0, right: 0, pointerEvents: "none" }}
+            >
+              Click to Edit
+            </div>
+          ) : undefined}
+        </div>
       )
     } else {
-      return R("div", {
-        key: "contents",
-        style: this.props.style,
-        className: this.props.className,
-        dangerouslySetInnerHTML: { __html: this.createHtml() },
-      })
+      return (
+        <div
+          key="contents"
+          style={this.props.style}
+          className={this.props.className}
+          dangerouslySetInnerHTML={{ __html: this.createHtml() }}
+        />
+      )
     }
   }
 
   render() {
-    return R(
-      "div",
-      {
-        style: { position: "relative" },
-        ref: (c: HTMLElement | null) => {
+    return (
+      <div
+        style={{ position: "relative" }}
+        ref={(c: HTMLElement | null) => {
           this.entireComponent = c
-        },
-      },
-      this.renderHtml(),
-      this.state.focused ? this.renderPalette() : undefined
+        }}
+      >
+        {this.renderHtml()}
+        {this.state.focused ? this.renderPalette() : undefined}
+      </div>
     )
   }
 }
-
-var removeFormatIcon =
-  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAACpF6WWAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAr0lEQVQ4y91U2w3CMAy8VB0kbFA2YYVuABOZbsAmGaFscnzgSlGSBgfCB1g6OXbkkx+yHUn0lgFfkN8hHSt/lma71kxdhIv6Dom/HGicflB97NVTD2ACsPQc1En1zUpqKb+pdEumzaVbSNPSRRFL7iNZQ1BstvApsmODZJXUa8A58W9Ea4nwFWkNa0Sc/Q+F1dyDRD30AO6qJV/wtgxNPR3fOEJXALO+5092/0+P9APt7i9xOIlepwAAAABJRU5ErkJggg=="

package/src/valueFormatter.ts

@@ -2,6 +2,7 @@ import { LiteralType } from "@mwater/expressions"
 import { format as d3Format } from "d3-format"
 import { fromLatLon } from "utm"
 import dayjs from './dayjs'
+import { stringify as wellknownStringify } from "./wellknown"
 
 /** Option for list of format options */
 export interface FormatOption {
@@ -32,7 +33,8 @@ export function getFormatOptions(type: LiteralType): FormatOption[] | null {
   if (type == "geometry") {
     return [
       { value: "lat, lng", label: "Latitude, Longitude" },
-      { value: "UTM", label: "UTM" }
+      { value: "UTM", label: "UTM" },
+      { value: "WKT", label: "Well-Known Text" }
     ]
   }
 
@@ -148,6 +150,8 @@ export function formatValue(
         return `${zoneNum}${zoneLetter} ${easting.toFixed(0)} ${northing.toFixed(0)}`
       }
       return value.type
+    } else if (format == "WKT") {
+      return wellknownStringify(value)
     } else {
       // Display as lat/lng if Point, otherwise type
       if (value.type == "Point") {