@mwater/visualization 5.2.0 → 5.3.0

package/src/maps/vectorMaps.tsx

@@ -63,8 +63,8 @@ export function useVectorMap(options: {
     if (!divRef) {
       return
     }
-    
-    const observer = new IntersectionObserver(function(entries) {
+
+    const observer = new IntersectionObserver(function (entries) {
       // When in printing mode, always visible as we need to render the map
       setMapDivVisible(entries[0].isIntersecting || printingModeEnabled)
     })
@@ -88,65 +88,70 @@ export function useVectorMap(options: {
       return
     }
 
-    const m = new maplibregl.Map({
-      container: divRef,
-      bounds: bounds,
-      scrollZoom: scrollZoom === false ? false : true,
-      dragPan: dragPan === false ? false : true,
-      touchZoomRotate: touchZoomRotate === false ? false : true,
-      attributionControl: false,
-      boxZoom: false,
-      style: {
-        version: 8,
-        layers: [],
-        sources: {}
-      },
-      // Prevent scrolling outside of world bounds
-      maxBounds: [
-        [-179.9, -85], // Southwest coordinates
-        [179.9, 85] // Northeast coordinates
-      ],
-      preserveDrawingBuffer: printingModeEnabled
-    })
+    try {
+      const m = new maplibregl.Map({
+        container: divRef,
+        bounds: bounds,
+        scrollZoom: scrollZoom === false ? false : true,
+        dragPan: dragPan === false ? false : true,
+        touchZoomRotate: touchZoomRotate === false ? false : true,
+        attributionControl: false,
+        boxZoom: false,
+        style: {
+          version: 8,
+          layers: [],
+          sources: {}
+        },
+        // Prevent scrolling outside of world bounds
+        maxBounds: [
+          [-179.9, -85], // Southwest coordinates
+          [179.9, 85] // Northeast coordinates
+        ],
+        preserveDrawingBuffer: printingModeEnabled
+      })
 
-    setHasWebGLContext(true)
+      setHasWebGLContext(true)
 
-    // Add listener for losing context
-    m.on("webglcontextlost", () => {
-      console.warn("Lost WebGL context")
-      setHasWebGLContext(false)
-    })
+      // Add listener for losing context
+      m.on("webglcontextlost", () => {
+        console.warn("Lost WebGL context")
+        setHasWebGLContext(false)
+      })
 
-    // Add zoom controls to the map.
-    m.addControl(new maplibregl.NavigationControl({}), "top-left")
+      // Add zoom controls to the map.
+      m.addControl(new maplibregl.NavigationControl({}), "top-left")
 
-    // Add scale control
-    const scale = new maplibregl.ScaleControl({
-      unit: "metric"
-    })
-    m.addControl(scale)
-
-    // Speed up wheel scrolling
-    m.scrollZoom.setWheelZoomRate(1 / 250)
-
-    // Dynamically load symbols
-    m.on("styleimagemissing" as any, function (ev: { id: string }) {
-      // Check if known
-      const mapSymbol = mapSymbols.find((s) => s.value == ev.id)
-      if (mapSymbol) {
-        m.loadImage(mapSymbol.url, (err: any, image: any) => {
-          if (image && !m.hasImage(mapSymbol.value)) {
-            m.addImage(mapSymbol.value, image, { sdf: true })
-          }
-        })
-      }
-    })
+      // Add scale control
+      const scale = new maplibregl.ScaleControl({
+        unit: "metric"
+      })
+      m.addControl(scale)
+
+      // Speed up wheel scrolling
+      m.scrollZoom.setWheelZoomRate(1 / 250)
+
+      // Dynamically load symbols
+      m.on("styleimagemissing" as any, function (ev: { id: string }) {
+        // Check if known
+        const mapSymbol = mapSymbols.find((s) => s.value == ev.id)
+        if (mapSymbol) {
+          m.loadImage(mapSymbol.url, (err: any, image: any) => {
+            if (image && !m.hasImage(mapSymbol.value)) {
+              m.addImage(mapSymbol.value, image, { sdf: true })
+            }
+          })
+        }
+      })
 
-    setMap(m)
+      setMap(m)
 
-    return () => {
-      m.remove()
-      setHasWebGLContext(false)
+      return () => {
+        m.remove()
+        setHasWebGLContext(false)
+      }
+    } catch (e) {
+      console.error("Error loading map", e)
+      alert(T`Error loading map. Please check that your browser and drivers are updated.`)
     }
   }, [mapReloadCount])
 
@@ -187,10 +192,10 @@ export function useHoverCursor(map: maplibregl.Map | undefined, layerIds: string
 
 /** Apply user style to a map with base style */
 export function useStyleMap(options: {
-  map: maplibregl.Map | undefined, 
+  map: maplibregl.Map | undefined,
   baseLayer: BaseLayer,
   baseLayerOpacity?: number | null,
-  userStyle: maplibregl.StyleSpecification | null | undefined, 
+  userStyle: maplibregl.StyleSpecification | null | undefined,
 }) {
   const { map, baseLayer, baseLayerOpacity, userStyle } = options
 
@@ -229,11 +234,11 @@ export function useBaseStyle(baseLayer: BaseLayer) {
     }
 
     if (baseLayer == "cartodb_positron") {
-      loadStyle(`https://api.maptiler.com/maps/positron/style.json?key=${mapTilerApiKey}`)
+      loadStyle(`https://api.maptiler.com/maps/5f972163-6078-4341-982a-5c8bc4447e68/style.json?key=${mapTilerApiKey}`)
     } else if (baseLayer == "cartodb_dark_matter") {
-      loadStyle(`https://api.maptiler.com/maps/darkmatter/style.json?key=${mapTilerApiKey}`)
+      loadStyle(`https://api.maptiler.com/maps/1d3e957b-c546-4791-b9de-dce203538429/style.json?key=${mapTilerApiKey}`)
     } else if (baseLayer == "bing_road") {
-      loadStyle(`https://api.maptiler.com/maps/streets/style.json?key=${mapTilerApiKey}`)
+      loadStyle(`https://api.maptiler.com/maps/streets-v2/style.json?key=${mapTilerApiKey}`)
     } else if (baseLayer == "bing_aerial") {
       // Switched to Bing for superior aerial imagery
       loadBingBasemap("AerialWithLabels", 1).then(setBaseStyle)
@@ -252,8 +257,8 @@ export function useBaseStyle(baseLayer: BaseLayer) {
 
 /** Combines a base style and a user style */
 export function mergeBaseAndUserStyle(
-  baseStyle: maplibregl.StyleSpecification | null | undefined, 
-  userStyle: maplibregl.StyleSpecification | null | undefined, 
+  baseStyle: maplibregl.StyleSpecification | null | undefined,
+  userStyle: maplibregl.StyleSpecification | null | undefined,
   baseLayerOpacity?: number | null) {
   // Merge until baseStyle and userStyle are present
   if (!baseStyle || !userStyle) {
@@ -292,9 +297,9 @@ export function mergeBaseAndUserStyle(
   return style
 }
 
-export function AttributionControl(props: { 
+export function AttributionControl(props: {
   baseLayer: BaseLayer
-  extraText?: string 
+  extraText?: string
 }) {
   if (props.baseLayer == "blank") {
     return <div className="newmap-attribution-control">
@@ -315,7 +320,7 @@ export function AttributionControl(props: {
     <div className="newmap-attribution-control">
       <a href="https://www.maptiler.com/copyright/" target="_blank">
         &copy; MapTiler
-      </a> 
+      </a>
       {" "}
       <a href="https://www.openstreetmap.org/about/" target="_blank">
         © OpenStreetMap
@@ -333,15 +338,15 @@ export function VectorMapLogo(props: {
   }
 
   if (props.baseLayer == "bing_aerial") {
-    return <img 
-      src="https://dev.virtualearth.net/Branding/logo_powered_by.png" 
-      style={{ position: "absolute", bottom: 38, left: 11, height: 22, zIndex: 1000, pointerEvents: "none" }} 
+    return <img
+      src="https://dev.virtualearth.net/Branding/logo_powered_by.png"
+      style={{ position: "absolute", bottom: 38, left: 11, height: 22, zIndex: 1000, pointerEvents: "none" }}
     />
   }
 
-  return <img 
-    src={require("./Maptiler-logo.png").default} 
-    style={{ position: "absolute", bottom: 38, left: 11, height: 22, zIndex: 1000, pointerEvents: "none" }} 
+  return <img
+    src={require("./Maptiler-logo.png").default}
+    style={{ position: "absolute", bottom: 38, left: 11, height: 22, zIndex: 1000, pointerEvents: "none" }}
   />
 }
 
@@ -351,12 +356,12 @@ async function loadBingBasemap(basemapType: "AerialWithLabels", opacity: number)
 
   const metadata = await fetch(`https://dev.virtualearth.net/REST/v1/Imagery/Metadata/${basemapType}?key=${bingApiKey}`).then((response) => response.json())
   const resource = metadata.resourceSets[0].resources[0]
-  
+
   return {
     sources: {
       "bing_raster": {
         type: "raster",
-        tiles: resource.imageUrlSubdomains.map((subdomain: string) => 
+        tiles: resource.imageUrlSubdomains.map((subdomain: string) =>
           resource.imageUrl.replace("{subdomain}", subdomain).replace("{culture}", "").replace("http:", "https:")),
         tileSize: resource.imageHeight,
       }
@@ -416,4 +421,4 @@ export function usePersistedMapBounds(map: Map | undefined, localStorageKey: str
     }
   }, [map])
 }
-    
+

package/src/quickfilter/QuickfiltersComponent.ts

@@ -1,5 +1,4 @@
 import _ from "lodash"
-import PropTypes from "prop-types"
 import React from "react"
 const R = React.createElement
 import { default as ReactSelect } from "react-select"
@@ -12,6 +11,7 @@ import IdArrayQuickfilterComponent from "./IdArrayQuickfilterComponent"
 import { Quickfilter, QuickfilterLock } from "./Quickfilter"
 import { QuickfiltersDataSource } from "./QuickfiltersDataSource"
 import { JsonQLFilter } from ".."
+import { LocaleContext } from "@mwater/expressions-ui/lib/contexts"
 
 export interface QuickfiltersComponentProps {
   /** Design of quickfilters. See README.md */
@@ -219,7 +219,7 @@ interface EnumQuickfilterComponentProps {
 
 /** Quickfilter for an enum */
 class EnumQuickfilterComponent extends React.Component<EnumQuickfilterComponentProps> {
-  static contextTypes = { locale: PropTypes.string }
+  static contextType = LocaleContext
 
   handleSingleChange = (val: any) => {
     if (val) {
@@ -275,7 +275,7 @@ class EnumQuickfilterComponent extends React.Component<EnumQuickfilterComponentP
   render() {
     const options = _.map(this.props.options, (opt) => ({
       value: opt.id,
-      label: ExprUtils.localizeString(opt.name, this.context.locale)
+      label: ExprUtils.localizeString(opt.name, this.context)
     }))
 
     // Determine width, estimating about 8 px per letter with 120px padding

package/src/richtext/DropdownPaletteItem.tsx

@@ -0,0 +1,144 @@
+import React, { ReactNode } from "react"
+import _ from "lodash"
+import ClickOutHandler from "react-onclickout"
+
+export interface DropdownItem {
+  label: ReactNode
+  value: string
+  /** If true, this item will be rendered only when "More..." is clicked. */
+  more?: boolean
+}
+
+export interface DropdownPaletteItemProps {
+  label: ReactNode
+
+  items: DropdownItem[]
+
+  /** Called with clicked item */
+  onSelect: (value: string) => void
+
+  /** should the popup be under or over? */
+  position?: "under" | "over"
+}
+
+interface DropdownPaletteItemState {
+  open: boolean
+  moreOpen: boolean
+}
+
+/** Palette item that allows picking from dropdown */
+export default class DropdownPaletteItem extends React.Component<DropdownPaletteItemProps, DropdownPaletteItemState> {
+  static defaultProps = { position: "under" }
+
+  constructor(props: DropdownPaletteItemProps) {
+    super(props)
+    this.state = {
+      open: false,
+      moreOpen: false
+    }
+  }
+
+  handleMouseDown = (ev: React.MouseEvent) => {
+    // Ignore if clicking on menu
+    if ((ev.target as HTMLElement).className === "dropdown-palette-menu-item") {
+      return
+    }
+
+    // Don't lose focus from editor
+    ev.preventDefault()
+    this.setState({ open: !this.state.open })
+  }
+
+  handleMoreClick = (ev: React.MouseEvent) => {
+    ev.preventDefault()
+    this.setState({ moreOpen: true })
+  }
+
+  renderItem(item: DropdownItem) {
+    return (
+      <div
+        className="dropdown-palette-menu-item"
+        onMouseDown={(ev: React.MouseEvent) => {
+          ev.preventDefault()
+          this.props.onSelect(item.value)
+          this.setState({ open: false })
+        }}
+        key={item.value}
+      >
+        {item.label}
+      </div>
+    )
+  }
+
+  renderItems() {
+    const visibleItems = this.state.moreOpen ? this.props.items : this.props.items.filter(item => !item.more)
+    const halfLength = Math.ceil(visibleItems.length / 2)
+    const leftColumn = visibleItems.slice(0, halfLength)
+    const rightColumn = visibleItems.slice(halfLength)
+
+    return (
+      <div className="dropdown-palette-menu">
+        <div style={{ display: 'flex' }}>
+          <div style={{ flex: 1 }}>
+            {leftColumn.map(item => this.renderItem(item))}
+          </div>
+          <div style={{ flex: 1 }}>
+            {rightColumn.map(item => this.renderItem(item))}
+          </div>
+        </div>
+        {this.props.items.some(item => item.more) && !this.state.moreOpen && (
+          <div 
+            className="dropdown-palette-menu-item"
+            onMouseDown={this.handleMoreClick}
+          >
+            More...
+          </div>
+        )}
+      </div>
+    )
+  }
+
+  render() {
+    const popupPosition: React.CSSProperties = {
+      position: "absolute",
+      left: 0,
+      zIndex: 1000,
+      backgroundColor: "white",
+      border: "solid 1px #AAA",
+      borderRadius: 3
+    }
+
+    if (this.props.position === "under") {
+      popupPosition.top = 26
+    } else {
+      popupPosition.bottom = 26
+    }
+
+    return (
+      <ClickOutHandler onClickOut={() => this.setState({ open: false, moreOpen: false })}>
+        <div
+          className="mwater-visualization-text-palette-item"
+          style={{ position: "relative" }}
+          onMouseDown={this.handleMouseDown}
+        >
+          <style>
+            {`
+              .dropdown-palette-menu-item {
+                color: black;
+                background-color: white;
+                text-align: left;
+                padding: 5px 15px 5px 15px;
+                cursor: pointer;
+              }
+              .dropdown-palette-menu-item:hover {
+                background-color: #DDD;
+              }
+            `}
+          </style>
+          {this.state.open ? <div style={popupPosition}>{this.renderItems()}</div> : undefined}
+          {this.props.label}
+        </div>
+      </ClickOutHandler>
+    )
+  }
+}

package/src/richtext/FontColorPaletteItem.tsx

@@ -0,0 +1,160 @@
+import React from "react"
+import _ from "lodash"
+import ClickOutHandler from "react-onclickout"
+import Color from "color"
+import { CustomColorsContext } from "../CustomColorsContext"
+
+export interface FontColorPaletteItemProps {
+  /** Called with "#FF8800", etc. */
+  onSetColor: any
+  /** should the popup be under or over? */
+  position?: string
+}
+
+interface FontColorPaletteItemState {
+  open: any
+}
+
+// Palette item that allows picking a color
+export default class FontColorPaletteItem extends React.Component<
+  FontColorPaletteItemProps,
+  FontColorPaletteItemState
+> {
+  static defaultProps = { position: "under" }
+
+  constructor(props: any) {
+    super(props)
+    this.state = {
+      open: false
+    }
+  }
+
+  handleMouseDown = (ev: any) => {
+    // Don't lose focus from editor
+    ev.preventDefault()
+    return this.setState({ open: !this.state.open })
+  }
+
+  render() {
+    const popupPosition: React.CSSProperties = {
+      position: "absolute",
+      left: 0,
+      zIndex: 1000,
+      backgroundColor: "white",
+      border: "solid 1px #AAA",
+      borderRadius: 3
+    }
+
+    if (this.props.position === "under") {
+      popupPosition["top"] = 26
+    } else {
+      popupPosition["bottom"] = 26
+    }
+
+    return (
+      <ClickOutHandler onClickOut={() => this.setState({ open: false })}>
+        <div
+          className="mwater-visualization-text-palette-item"
+          onMouseDown={this.handleMouseDown}
+          style={{ position: "relative" }}
+        >
+          {this.state.open ? (
+            <div style={popupPosition}>
+              <ColorPaletteComponent
+                onSetColor={(color: any) => {
+                  this.props.onSetColor(color)
+                  return this.setState({ open: false })
+                }}
+              />
+            </div>
+          ) : undefined}
+
+          <i className="fas fa-palette" />
+        </div>
+      </ClickOutHandler>
+    )
+  }
+}
+
+interface ColorPaletteComponentProps {
+  onSetColor: any
+}
+
+class ColorPaletteComponent extends React.Component<ColorPaletteComponentProps> {
+  static contextType = CustomColorsContext
+  declare context: React.ContextType<typeof CustomColorsContext>
+
+  renderColor(color: any) {
+    return (
+      <td>
+        <div
+          style={{ width: 16, height: 15, backgroundColor: color, margin: 1 }}
+          onMouseDown={(ev: any) => {
+            ev.preventDefault()
+            this.props.onSetColor(color)
+          }}
+        />
+      </td>
+    )
+  }
+
+  render() {
+    const baseColors = [
+      "#FF0000", // red
+      "#FFAA00", // orange
+      "#FFFF00", // yellow
+      "#00FF00", // green
+      "#00FFFF", // cyan
+      "#0000FF", // blue
+      "#9900FF", // purple
+      "#FF00FF" // magenta
+    ]
+
+    const customColors = this.context?.customColors || []
+
+    return (
+      <div style={{ padding: 5 }}>
+        <table>
+          <tbody>
+            {/* Custom colors */}
+            {_.chunk(customColors.filter(color => color != null), 8).map((colorGroup, index) => (
+              <tr key={index}>
+                {colorGroup.map((color) => this.renderColor(color))}
+              </tr>
+            ))}
+            {/* Grey shades */}
+            <tr>
+              {_.map(_.range(0, 8), (i) => {
+                return this.renderColor(Color({ r: (i * 255) / 7, g: (i * 255) / 7, b: (i * 255) / 7 }).hex())
+              })}
+            </tr>
+            <tr style={{ height: 5 }} />
+            {/* Base colors */}
+            <tr>
+              {_.map(baseColors, (c) => this.renderColor(c))}
+            </tr>
+            <tr style={{ height: 5 }} />
+            <tr>
+              {_.map(baseColors, (c) => this.renderColor(Color(c).lighten(0.7).hex()))}
+            </tr>
+            <tr>
+              {_.map(baseColors, (c) => this.renderColor(Color(c).lighten(0.5).hex()))}
+            </tr>
+            <tr>
+              {_.map(baseColors, (c) => this.renderColor(Color(c).lighten(0.3).hex()))}
+            </tr>
+            <tr>
+              {_.map(baseColors, (c) => this.renderColor(Color(c).darken(0.3).hex()))}
+            </tr>
+            <tr>
+              {_.map(baseColors, (c) => this.renderColor(Color(c).darken(0.5).hex()))}
+            </tr>
+            <tr>
+              {_.map(baseColors, (c) => this.renderColor(Color(c).darken(0.7).hex()))}
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    )
+  }
+}

package/src/richtext/ItemsHtmlConverter.ts

@@ -82,6 +82,9 @@ export default class ItemsHtmlConverter {
             if (!allowedStyles[key]) {
               continue
             }
+            if (value == null || value === "") {
+              continue
+            }
 
             if (!first) {
               attrs += " "
@@ -163,14 +166,21 @@ export default class ItemsHtmlConverter {
         const item: HtmlItemElement = { type: "element", tag, items: this.convertElemToItems((node as HTMLElement)) }
 
         // Add style
-        if ((node as HTMLElement).style != null) {
-          for (style of (node as HTMLElement).style) {
-            if (!allowedStyles[style]) {
+        const nodeElement = node as HTMLElement
+        if (nodeElement.style != null) {
+          const styleDeclaration = nodeElement.style
+          for (const style of styleDeclaration) {
+            if (!allowedStyles[style as string]) {
+              continue
+            }
+
+            const value = styleDeclaration[style as any]
+            if (value == null || value === "") {
               continue
             }
 
             item.style = item.style || {}
-            item.style[style] = (node as HTMLElement).style[style]
+            item.style[style] = value
           }
         }
 
@@ -243,4 +253,4 @@ var allowedStyles: { [style: string]: number } = {
   "text-decoration": 1,
   color: 1,
   "font-size": 1
-}
+}