@terraware/web-components 5.0.27-rc.0 → 5.0.27

package/components/Map/MapViewStyleControl.js

@@ -1,62 +1,66 @@
-import { jsx } from "react/jsx-runtime";
-import { useCallback, useMemo } from "react";
-import { Box, useTheme } from "@mui/material";
-import PopoverMenu from "../PopoverMenu/index.js";
-import { MapViewStyles } from "./types.js";
-const MapViewStyleControl = ({ containerId, mapViewStyle, mapViewStyleNames, setMapViewStyle })=>{
-    const theme = useTheme();
-    const viewOptions = useMemo(()=>MapViewStyles.map((style)=>({
-                label: mapViewStyleNames?.(style) ?? style,
-                value: style
-            })), [
-        mapViewStyleNames
-    ]);
-    const onSelectMapViewStyle = useCallback((item)=>{
-        setMapViewStyle(item.value);
-    }, []);
-    const container = useMemo(()=>{
-        if (containerId) return document.getElementById(containerId);
-    }, [
-        containerId
-    ]);
-    return /*#__PURE__*/ jsx(Box, {
+import { useMemo, useCallback } from 'react';
+import { useTheme, Box } from '@mui/material';
+import PopoverMenu from '../PopoverMenu/index.js';
+import { MapViewStyles } from './types.js';
+import { jsx } from 'react/jsx-runtime';
+
+const MapViewStyleControl = ({
+  containerId,
+  mapViewStyle,
+  mapViewStyleNames,
+  setMapViewStyle
+}) => {
+  const theme = useTheme();
+  const viewOptions = useMemo(() => {
+    return MapViewStyles.map(style => ({
+      label: mapViewStyleNames?.(style) ?? style,
+      value: style
+    }));
+  }, [mapViewStyleNames]);
+  const onSelectMapViewStyle = useCallback(item => {
+    setMapViewStyle(item.value);
+  }, []);
+  const container = useMemo(() => {
+    if (containerId) {
+      return document.getElementById(containerId);
+    }
+  }, [containerId]);
+  return /*#__PURE__*/jsx(Box, {
+    sx: {
+      position: 'absolute',
+      top: '10px',
+      left: '45px',
+      zIndex: 10,
+      height: 28,
+      backgroundColor: `${theme.palette.TwClrBaseWhite}`,
+      borderRadius: '4px',
+      display: 'flex',
+      alignItems: 'center',
+      '& .MuiButtonBase-root': {
+        padding: 0
+      },
+      '& .MuiButtonBase-root.MuiMenuItem-root': {
+        fontSize: '12px'
+      },
+      '& svg': {
+        marginLeft: 0
+      }
+    },
+    children: /*#__PURE__*/jsx(PopoverMenu, {
+      anchor: /*#__PURE__*/jsx(Box, {
+        component: "span",
         sx: {
-            position: 'absolute',
-            top: '10px',
-            left: '45px',
-            zIndex: 10,
-            height: 28,
-            backgroundColor: `${theme.palette.TwClrBaseWhite}`,
-            borderRadius: '4px',
-            display: 'flex',
-            alignItems: 'center',
-            '& .MuiButtonBase-root': {
-                padding: 0
-            },
-            '& .MuiButtonBase-root.MuiMenuItem-root': {
-                fontSize: '12px'
-            },
-            '& svg': {
-                marginLeft: 0
-            }
+          fontSize: '12px',
+          paddingLeft: theme.spacing(0.5),
+          color: theme.palette.TwClrTxt
         },
-        children: /*#__PURE__*/ jsx(PopoverMenu, {
-            anchor: /*#__PURE__*/ jsx(Box, {
-                component: "span",
-                sx: {
-                    fontSize: '12px',
-                    paddingLeft: theme.spacing(0.5),
-                    color: theme.palette.TwClrTxt
-                },
-                children: mapViewStyleNames?.(mapViewStyle) ?? mapViewStyle
-            }),
-            container: container,
-            menuSections: [
-                viewOptions
-            ],
-            onClick: onSelectMapViewStyle
-        })
-    });
+        children: mapViewStyleNames?.(mapViewStyle) ?? mapViewStyle
+      }),
+      container: container,
+      menuSections: [viewOptions],
+      onClick: onSelectMapViewStyle
+    })
+  });
 };
-const Map_MapViewStyleControl = MapViewStyleControl;
-export default Map_MapViewStyleControl;
+
+export { MapViewStyleControl as default };

package/components/Map/ReactMapboxWrapper.js

@@ -1,3 +1,2 @@
-import mapbox from "react-map-gl/mapbox";
-const ReactMapboxWrapper = mapbox;
-export default ReactMapboxWrapper;
+import ReactMapbox from 'react-map-gl/mapbox';
+export { default } from 'react-map-gl/mapbox';

package/components/Map/index.js

@@ -1,163 +1,182 @@
-import { jsx } from "react/jsx-runtime";
-import { useCallback, useMemo, useState } from "react";
-import MapBox from "./MapBox.js";
-import MapContainer from "./MapContainer.js";
-import MapDrawer from "./MapDrawer.js";
-import MapLegend from "./MapLegend.js";
-const MapComponent = (props)=>{
-    const { clusterRadius, controlBottomLeft, controlTopRight, cursorInteract, cursorMap, disableDoubleClickZoom, disableZoom, drawerChildren, drawerOpen, drawerSize, drawerTitle, features, hideFullScreenControl, hideLegend, hideMapViewStyleControl, hideZoomControl, initialSelectedLayerId, initialMapViewStyle, initialViewState, mapContainerId, mapId, onClickCanvas, setDrawerOpen, token } = props;
-    const [mapViewStyle, setMapViewStyle] = useState(initialMapViewStyle ?? 'Streets');
-    const [visibleHighlights, setVisibleHighlights] = useState([]);
-    const setHighlightVisible = useCallback((highlightId)=>(visible)=>{
-            visible ? setVisibleHighlights((_visibleHighlights)=>[
-                    ..._visibleHighlights,
-                    highlightId
-                ]) : setVisibleHighlights((_visibleHighlights)=>_visibleHighlights.filter((_highlightId)=>_highlightId !== highlightId));
-        }, []);
-    const [visibleMarkers, setVisibleMarkers] = useState([]);
-    const setMarkerVisible = useCallback((markerGroupId)=>(visible)=>{
-            visible ? setVisibleMarkers((_visibleMarkers)=>[
-                    ..._visibleMarkers,
-                    markerGroupId
-                ]) : setVisibleMarkers((_visibleMarkers)=>_visibleMarkers.filter((_markerGroupId)=>_markerGroupId !== markerGroupId));
-        }, []);
-    const [selectedLayer, setSelectedLayer] = useState(initialSelectedLayerId);
-    const legends = useMemo(()=>features?.map((feature)=>{
-            const baseLegendGroup = {
-                disabled: feature.sectionDisabled,
-                title: feature.sectionTitle,
-                tooltip: feature.sectionTooltip
-            };
-            switch(feature.type){
-                case 'highlight':
-                    return {
-                        ...baseLegendGroup,
-                        items: feature.legendItems,
-                        type: 'highlight',
-                        visible: visibleHighlights.findIndex((highlightId)=>highlightId === feature.highlight.highlightId) >= 0,
-                        setVisible: setHighlightVisible(feature.highlight.highlightId)
-                    };
-                case 'layer':
-                    return {
-                        ...baseLegendGroup,
-                        items: feature.layers.map((layer)=>({
-                                disabled: layer.disabled,
-                                id: layer.layerId,
-                                label: layer.label,
-                                style: layer.style
-                            })),
-                        selectedLayer,
-                        setSelectedLayer,
-                        type: 'layer'
-                    };
-                case 'marker':
-                    return {
-                        ...baseLegendGroup,
-                        items: feature.groups.map((group)=>({
-                                disabled: group.disabled,
-                                id: group.markerGroupId,
-                                label: group.label,
-                                style: group.style,
-                                setVisible: setMarkerVisible(group.markerGroupId),
-                                visible: visibleMarkers.findIndex((markerId)=>markerId === group.markerGroupId) >= 0
-                            })),
-                        type: 'marker'
-                    };
-            }
-        }), [
-        features,
-        selectedLayer,
-        visibleHighlights,
-        visibleMarkers
-    ]);
-    const layers = useMemo(()=>features?.filter((feature)=>'layer' === feature.type)?.flatMap((feature)=>feature.layers)?.filter((layer)=>layer.layerId === selectedLayer), [
-        features,
-        selectedLayer
-    ]);
-    const highlightGroups = useMemo(()=>features?.filter((feature)=>'highlight' === feature.type)?.map((feature)=>feature.highlight)?.filter((highlight)=>visibleHighlights.findIndex((_highlightId)=>_highlightId === highlight.highlightId) >= 0), [
-        features,
-        visibleHighlights
-    ]);
-    const markerGroups = useMemo(()=>features?.filter((feature)=>'marker' === feature.type)?.flatMap((feature)=>feature.groups).filter((group)=>visibleMarkers.findIndex((_markerId)=>_markerId === group.markerGroupId) >= 0), [
-        features,
-        visibleMarkers
-    ]);
-    const mapViewState = useMemo(()=>{
-        if (initialViewState) return initialViewState;
-        else if (features) {
-            const coordinates = features.filter((feature)=>'layer' === feature.type).flatMap((feature)=>feature.layers).flatMap((layer)=>layer.features).map((geoFeature)=>geoFeature.geometry.coordinates).flat().flat().flat();
-            if (coordinates.length > 0) {
-                let minLat = 1 / 0;
-                let maxLat = -1 / 0;
-                let minLng = 1 / 0;
-                let maxLng = -1 / 0;
-                for (const [lng, lat] of coordinates){
-                    minLat = Math.min(minLat, lat);
-                    maxLat = Math.max(maxLat, lat);
-                    minLng = Math.min(minLng, lng);
-                    maxLng = Math.max(maxLng, lng);
-                }
-                const centerLng = (minLng + maxLng) / 2;
-                const centerLat = (minLat + maxLat) / 2;
-                return {
-                    latitude: centerLat,
-                    longitude: centerLng,
-                    zoom: 12
-                };
-            }
-        }
-    }, [
-        initialViewState
-    ]);
-    const mapImageUrls = useMemo(()=>{
-        const layerFeatures = features?.filter((feature)=>'layer' === feature.type) ?? [];
-        const highlightFeatures = features?.filter((feature)=>'highlight' === feature.type) ?? [];
-        const layerImageUrls = layerFeatures.flatMap((feature)=>feature.layers).map((layer)=>layer.style.fillPatternUrl).filter((url)=>void 0 !== url);
-        const highlightImageUrls = highlightFeatures.flatMap((feature)=>feature.highlight.highlights).map((highlight)=>highlight.style.fillPatternUrl).filter((url)=>void 0 !== url);
-        const imageUrls = new Set(layerImageUrls);
-        highlightImageUrls.forEach((url)=>imageUrls.add(url));
-        return Array.from(imageUrls);
-    }, [
-        features
-    ]);
-    return /*#__PURE__*/ jsx(MapContainer, {
-        containerId: mapContainerId ?? 'map-container',
-        map: /*#__PURE__*/ jsx(MapBox, {
-            clusterRadius: clusterRadius,
-            containerId: mapContainerId ?? 'map-container',
-            controlBottomLeft: controlBottomLeft,
-            controlTopRight: controlTopRight,
-            cursorInteract: cursorInteract,
-            cursorMap: cursorMap,
-            disableDoubleClickZoom: disableDoubleClickZoom,
-            disableZoom: disableZoom,
-            drawerOpen: drawerOpen,
-            hideFullScreenControl: hideFullScreenControl,
-            hideMapViewStyleControl: hideMapViewStyleControl,
-            hideZoomControl: hideZoomControl,
-            highlightGroups: highlightGroups,
-            initialViewState: mapViewState,
-            layers: layers,
-            mapId: mapId ?? 'mapId',
-            mapImageUrls: mapImageUrls,
-            mapViewStyle: mapViewStyle,
-            markerGroups: markerGroups,
-            onClickCanvas: onClickCanvas,
-            setMapViewStyle: setMapViewStyle,
-            token: token
-        }),
-        drawer: /*#__PURE__*/ jsx(MapDrawer, {
-            open: drawerOpen ?? false,
-            onClose: ()=>setDrawerOpen?.(false),
-            size: drawerSize ?? 'small',
-            title: drawerTitle ?? '',
-            children: drawerChildren
-        }),
-        drawerOpen: drawerOpen,
-        legend: !hideLegend && legends && /*#__PURE__*/ jsx(MapLegend, {
-            legends: legends
-        })
+import { useState, useCallback, useMemo } from 'react';
+import MapBox from './MapBox.js';
+import MapContainer from './MapContainer.js';
+import MapDrawer from './MapDrawer.js';
+import MapLegend from './MapLegend.js';
+import { jsx } from 'react/jsx-runtime';
+
+const MapComponent = props => {
+  const {
+    clusterRadius,
+    controlBottomLeft,
+    controlTopRight,
+    cursorInteract,
+    cursorMap,
+    disableDoubleClickZoom,
+    disableZoom,
+    drawerChildren,
+    drawerOpen,
+    drawerSize,
+    drawerTitle,
+    features,
+    hideFullScreenControl,
+    hideLegend,
+    hideMapViewStyleControl,
+    hideZoomControl,
+    initialSelectedLayerId,
+    initialMapViewStyle,
+    initialViewState,
+    mapContainerId,
+    mapId,
+    onClickCanvas,
+    setDrawerOpen,
+    token
+  } = props;
+  const [mapViewStyle, setMapViewStyle] = useState(initialMapViewStyle ?? 'Streets');
+  const [visibleHighlights, setVisibleHighlights] = useState([]);
+  const setHighlightVisible = useCallback(highlightId => visible => {
+    if (visible) {
+      setVisibleHighlights(_visibleHighlights => [..._visibleHighlights, highlightId]);
+    } else {
+      setVisibleHighlights(_visibleHighlights => _visibleHighlights.filter(_highlightId => _highlightId !== highlightId));
+    }
+  }, []);
+  const [visibleMarkers, setVisibleMarkers] = useState([]);
+  const setMarkerVisible = useCallback(markerGroupId => visible => {
+    if (visible) {
+      setVisibleMarkers(_visibleMarkers => [..._visibleMarkers, markerGroupId]);
+    } else {
+      setVisibleMarkers(_visibleMarkers => _visibleMarkers.filter(_markerGroupId => _markerGroupId !== markerGroupId));
+    }
+  }, []);
+  const [selectedLayer, setSelectedLayer] = useState(initialSelectedLayerId);
+  const legends = useMemo(() => {
+    return features?.map(feature => {
+      const baseLegendGroup = {
+        disabled: feature.sectionDisabled,
+        title: feature.sectionTitle,
+        tooltip: feature.sectionTooltip
+      };
+      switch (feature.type) {
+        case 'highlight':
+          return {
+            ...baseLegendGroup,
+            items: feature.legendItems,
+            type: 'highlight',
+            visible: visibleHighlights.findIndex(highlightId => highlightId === feature.highlight.highlightId) >= 0,
+            setVisible: setHighlightVisible(feature.highlight.highlightId)
+          };
+        case 'layer':
+          return {
+            ...baseLegendGroup,
+            items: feature.layers.map(layer => ({
+              disabled: layer.disabled,
+              id: layer.layerId,
+              label: layer.label,
+              style: layer.style
+            })),
+            selectedLayer,
+            setSelectedLayer,
+            type: 'layer'
+          };
+        case 'marker':
+          return {
+            ...baseLegendGroup,
+            items: feature.groups.map(group => ({
+              disabled: group.disabled,
+              id: group.markerGroupId,
+              label: group.label,
+              style: group.style,
+              setVisible: setMarkerVisible(group.markerGroupId),
+              visible: visibleMarkers.findIndex(markerId => markerId === group.markerGroupId) >= 0
+            })),
+            type: 'marker'
+          };
+      }
     });
+  }, [features, selectedLayer, visibleHighlights, visibleMarkers]);
+  const layers = useMemo(() => {
+    return features?.filter(feature => feature.type === 'layer')?.flatMap(feature => feature.layers)?.filter(layer => layer.layerId === selectedLayer);
+  }, [features, selectedLayer]);
+  const highlightGroups = useMemo(() => {
+    return features?.filter(feature => feature.type === 'highlight')?.map(feature => feature.highlight)?.filter(highlight => visibleHighlights.findIndex(_highlightId => _highlightId === highlight.highlightId) >= 0);
+  }, [features, visibleHighlights]);
+  const markerGroups = useMemo(() => {
+    return features?.filter(feature => feature.type === 'marker')?.flatMap(feature => feature.groups).filter(group => visibleMarkers.findIndex(_markerId => _markerId === group.markerGroupId) >= 0);
+  }, [features, visibleMarkers]);
+  const mapViewState = useMemo(() => {
+    if (initialViewState) {
+      return initialViewState;
+    } else if (features) {
+      const coordinates = features.filter(feature => feature.type === 'layer').flatMap(feature => feature.layers).flatMap(layer => layer.features).map(geoFeature => geoFeature.geometry.coordinates).flat().flat().flat();
+      if (coordinates.length > 0) {
+        let minLat = Infinity;
+        let maxLat = -Infinity;
+        let minLng = Infinity;
+        let maxLng = -Infinity;
+        for (const [lng, lat] of coordinates) {
+          minLat = Math.min(minLat, lat);
+          maxLat = Math.max(maxLat, lat);
+          minLng = Math.min(minLng, lng);
+          maxLng = Math.max(maxLng, lng);
+        }
+        const centerLng = (minLng + maxLng) / 2;
+        const centerLat = (minLat + maxLat) / 2;
+        return {
+          latitude: centerLat,
+          longitude: centerLng,
+          zoom: 12
+        };
+      }
+    }
+  }, [initialViewState]);
+  const mapImageUrls = useMemo(() => {
+    const layerFeatures = features?.filter(feature => feature.type === 'layer') ?? [];
+    const highlightFeatures = features?.filter(feature => feature.type === 'highlight') ?? [];
+    const layerImageUrls = layerFeatures.flatMap(feature => feature.layers).map(layer => layer.style.fillPatternUrl).filter(url => url !== undefined);
+    const highlightImageUrls = highlightFeatures.flatMap(feature => feature.highlight.highlights).map(highlight => highlight.style.fillPatternUrl).filter(url => url !== undefined);
+    const imageUrls = new Set(layerImageUrls);
+    highlightImageUrls.forEach(url => imageUrls.add(url));
+    return Array.from(imageUrls);
+  }, [features]);
+  return /*#__PURE__*/jsx(MapContainer, {
+    containerId: mapContainerId ?? 'map-container',
+    map: /*#__PURE__*/jsx(MapBox, {
+      clusterRadius: clusterRadius,
+      containerId: mapContainerId ?? 'map-container',
+      controlBottomLeft: controlBottomLeft,
+      controlTopRight: controlTopRight,
+      cursorInteract: cursorInteract,
+      cursorMap: cursorMap,
+      disableDoubleClickZoom: disableDoubleClickZoom,
+      disableZoom: disableZoom,
+      drawerOpen: drawerOpen,
+      hideFullScreenControl: hideFullScreenControl,
+      hideMapViewStyleControl: hideMapViewStyleControl,
+      hideZoomControl: hideZoomControl,
+      highlightGroups: highlightGroups,
+      initialViewState: mapViewState,
+      layers: layers,
+      mapId: mapId ?? 'mapId',
+      mapImageUrls: mapImageUrls,
+      mapViewStyle: mapViewStyle,
+      markerGroups: markerGroups,
+      onClickCanvas: onClickCanvas,
+      setMapViewStyle: setMapViewStyle,
+      token: token
+    }),
+    drawer: /*#__PURE__*/jsx(MapDrawer, {
+      open: drawerOpen ?? false,
+      onClose: () => setDrawerOpen?.(false),
+      size: drawerSize ?? 'small',
+      title: drawerTitle ?? '',
+      children: drawerChildren
+    }),
+    drawerOpen: drawerOpen,
+    legend: !hideLegend && legends && /*#__PURE__*/jsx(MapLegend, {
+      legends: legends
+    })
+  });
 };
-const Map = MapComponent;
-export default Map;
+
+export { MapComponent as default };

package/components/Map/types.js

@@ -1,15 +1,20 @@
-const MapViewStyles = [
-    'Outdoors',
-    'Satellite',
-    'Light',
-    'Dark',
-    'Streets'
-];
+/**
+ * Properties class for GeoJson, with a few reserved object defined.
+ */
+
+// Each layer item will become a feature, with a property of id.
+
+// Each layer will become a set of features that have the same type.
+
+// Additional shading/annotations for map entities
+
+const MapViewStyles = ['Outdoors', 'Satellite', 'Light', 'Dark', 'Streets'];
 const stylesUrl = {
-    Outdoors: 'mapbox://styles/mapbox/outdoors-v12?optimize=true',
-    Satellite: 'mapbox://styles/mapbox/satellite-streets-v12?optimize=true',
-    Streets: 'mapbox://styles/mapbox/streets-v12?optimize=true',
-    Light: 'mapbox://styles/mapbox/light-v11?optimize=true',
-    Dark: 'mapbox://styles/mapbox/dark-v11?optimize=true'
+  Outdoors: 'mapbox://styles/mapbox/outdoors-v12?optimize=true',
+  Satellite: 'mapbox://styles/mapbox/satellite-streets-v12?optimize=true',
+  Streets: 'mapbox://styles/mapbox/streets-v12?optimize=true',
+  Light: 'mapbox://styles/mapbox/light-v11?optimize=true',
+  Dark: 'mapbox://styles/mapbox/dark-v11?optimize=true'
 };
+
 export { MapViewStyles, stylesUrl };

package/components/Map/useMaintainLayerOrder.js

@@ -1,18 +1,28 @@
-import { useEffect } from "react";
-const useMaintainLayerOrder = (mapRef, orderedLayerIds)=>{
-    useEffect(()=>{
-        const map = mapRef.current;
-        if (!map) return;
-        const existingLayerIds = orderedLayerIds.filter((id)=>map.getLayer(id));
-        for(let i = existingLayerIds.length - 1; i >= 0; i--){
-            const layerId = existingLayerIds[i];
-            try {
-                map.moveLayer(layerId, i < existingLayerIds.length - 1 ? existingLayerIds[i + 1] : void 0);
-            } catch (e) {}
-        }
-    }, [
-        mapRef,
-        orderedLayerIds
-    ]);
+import { useEffect } from 'react';
+
+/**
+ * Ensures that all given layers maintain strict order in the Mapbox layer stack.
+ */
+const useMaintainLayerOrder = (mapRef, orderedLayerIds) => {
+  useEffect(() => {
+    const map = mapRef.current;
+    if (!map) {
+      return;
+    }
+
+    // Only move layers that exist
+    const existingLayerIds = orderedLayerIds.filter(id => map.getLayer(id));
+
+    // Reverse iterate so first in array ends up lowest
+    for (let i = existingLayerIds.length - 1; i >= 0; i--) {
+      const layerId = existingLayerIds[i];
+      try {
+        map.moveLayer(layerId, i < existingLayerIds.length - 1 ? existingLayerIds[i + 1] : undefined);
+      } catch (e) {
+        // moveLayer will throw if layer doesn't exist in current style
+      }
+    }
+  }, [mapRef, orderedLayerIds]);
 };
+
 export { useMaintainLayerOrder };

package/components/Markdown/index.js

@@ -1,26 +1,27 @@
-import { jsx } from "react/jsx-runtime";
-import { useCallback, useEffect, useState } from "react";
-import { marked } from "marked";
-import "./styles.scss";
-const Markdown = ({ value, style })=>{
-    const [html, setHtml] = useState();
-    const parseValue = useCallback(async (_value)=>{
-        const _html = await marked.parse(_value);
-        setHtml(_html);
-    }, []);
-    useEffect(()=>{
-        parseValue(value);
-    }, [
-        parseValue,
-        value
-    ]);
-    return /*#__PURE__*/ jsx("div", {
-        className: "markdown",
-        style: style,
-        dangerouslySetInnerHTML: {
-            __html: html ?? ''
-        }
-    });
+import { useState, useCallback, useEffect } from 'react';
+import { marked } from 'marked';
+import './styles.scss';
+import { jsx } from 'react/jsx-runtime';
+
+const Markdown = ({
+  value,
+  style
+}) => {
+  const [html, setHtml] = useState();
+  const parseValue = useCallback(async _value => {
+    const _html = await marked.parse(_value);
+    setHtml(_html);
+  }, []);
+  useEffect(() => {
+    void parseValue(value);
+  }, [parseValue, value]);
+  return /*#__PURE__*/jsx("div", {
+    className: "markdown",
+    style: style,
+    dangerouslySetInnerHTML: {
+      __html: html ?? ''
+    }
+  });
 };
-const components_Markdown = Markdown;
-export default components_Markdown;
+
+export { Markdown as default };