@dxos/react-ui-geo 0.8.3 → 0.8.4-main.1c7ec43d41

package/src/components/Map/Map.tsx

@@ -2,109 +2,226 @@
 // Copyright 2023 DXOS.org
 //
 
-// eslint-disable-next-line no-restricted-imports
 import 'leaflet/dist/leaflet.css';
 
-import L, { Control, DomEvent, DomUtil, latLngBounds, type ControlPosition, type LatLngExpression } from 'leaflet';
-import React, { forwardRef, useEffect, useImperativeHandle, type PropsWithChildren } from 'react';
+import { createContext } from '@radix-ui/react-context';
+import L, { Control, type ControlPosition, DomEvent, DomUtil, type LatLngLiteral, latLngBounds } from 'leaflet';
+import React, { type PropsWithChildren, forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
 import { createRoot } from 'react-dom/client';
-import type { MapContainerProps } from 'react-leaflet';
-import { MapContainer, Marker, Popup, TileLayer, useMap } from 'react-leaflet';
-import { useResizeDetector } from 'react-resize-detector';
+import { MapContainer, type MapContainerProps, Marker, Popup, TileLayer, useMap, useMapEvents } from 'react-leaflet';
 
-import { debounce } from '@dxos/async';
-import { ThemeProvider, Tooltip, type ThemedClassName } from '@dxos/react-ui';
-import { defaultTx, mx } from '@dxos/react-ui-theme';
+import { type ThemedClassName, ThemeProvider, Tooltip } from '@dxos/react-ui';
+import { composable, composableProps, defaultTx, mx } from '@dxos/ui-theme';
 
-import { ActionControls, controlPositions, ZoomControls, type ControlProps } from '../Toolbar';
-import { type MapCanvasProps } from '../types';
+import { type GeoMarker } from '../../types';
+import { ActionControls, type ControlProps, ZoomControls, controlPositions } from '../Toolbar';
 
 // TODO(burdon): Explore plugins: https://www.npmjs.com/search?q=keywords%3Areact-leaflet-v4
 // TODO(burdon): react-leaflet v5 is not compatible with react 18.
+// TODO(burdon): Guess initial location.
 
 const defaults = {
-  // TODO(burdon): Guess location.
-  center: { lat: 51, lng: 0 } as L.LatLngExpression,
+  center: { lat: 51, lng: 0 } as L.LatLngLiteral,
   zoom: 4,
+} as const;
+
+//
+// Controller
+//
+
+type MapController = {
+  setCenter: (center: LatLngLiteral, zoom?: number) => void;
+  setZoom: (cb: (zoom: number) => number) => void;
+};
+
+//
+// Context
+//
+
+type MapContextValue = {
+  attention?: boolean;
+  onChange?: (ev: { center: LatLngLiteral; zoom: number }) => void;
 };
 
+const [MapContextProvider, useMapContext] = createContext<MapContextValue>('Map');
+
 //
 // Root
 //
 
-type MapRootProps = ThemedClassName<MapContainerProps>;
+type MapRootProps = Pick<MapContextValue, 'onChange'>;
 
-// https://react-leaflet.js.org/docs/api-map
-const MapRoot = ({ classNames, center = defaults.center, zoom = defaults.zoom, ...props }: MapRootProps) => {
+/**
+ * Context provider for the map. Must wrap Map.Content.
+ */
+const MapRoot = composable<HTMLDivElement, MapRootProps>(({ children, onChange, ...props }, forwardedRef) => {
+  // TODO(burdon): Use attention: const [attention, setAttention] = useState(false);
+  const attention = false;
   return (
-    <MapContainer
-      className={mx('relative grid grow bg-baseSurface', classNames)}
-      attributionControl={false}
-      // TODO(burdon): Only if attention.
-      scrollWheelZoom={true}
-      zoomControl={false}
-      center={center}
-      zoom={zoom}
-      {...props}
-    />
+    <MapContextProvider attention={attention} onChange={onChange}>
+      <div
+        {...composableProps(props, {
+          role: 'none',
+          classNames: 'dx-container grid dx-focus-ring-inset',
+        })}
+        ref={forwardedRef}
+      >
+        {children}
+      </div>
+    </MapContextProvider>
   );
-};
+});
+
+MapRoot.displayName = 'Map.Root';
 
 //
-// Control
+// Content
 //
 
-// TODO(burdon): Normalize with Globe.
-type MapController = {
-  setCenter: (center: LatLngExpression, zoom?: number) => void;
-  setZoom: (cb: (zoom: number) => number) => void;
-};
+type MapContentProps = ThemedClassName<Omit<MapContainerProps, 'children'> & PropsWithChildren>;
 
-const MapCanvas = forwardRef<MapController, MapCanvasProps>(({ markers, center, zoom, onChange }, forwardedRef) => {
-  const { ref, width, height } = useResizeDetector({ refreshRate: 200 });
-  const map = useMap();
+/**
+ * https://react-leaflet.js.org/docs/api-map
+ */
+const MAP_CONTENT_NAME = 'Map.Content';
 
-  useImperativeHandle(
+const MapContent = forwardRef<MapController, MapContentProps>(
+  (
+    { classNames, scrollWheelZoom = true, doubleClickZoom = true, touchZoom = true, center, zoom, children, ...props },
     forwardedRef,
-    () => ({
-      setCenter: (center: LatLngExpression, zoom?: number) => {
-        map.setView(center, zoom);
-      },
-      setZoom: (cb) => {
-        map.setZoom(cb(map.getZoom()));
-      },
-    }),
-    [map],
-  );
+  ) => {
+    const { attention } = useMapContext(MAP_CONTENT_NAME);
+    const mapRef = useRef<L.Map>(null);
+    const map = mapRef.current;
 
-  // Resize.
-  useEffect(() => {
-    if (width && height) {
-      map.invalidateSize();
-    }
-  }, [width, height]);
+    useImperativeHandle(
+      forwardedRef,
+      () => ({
+        setCenter: (center: LatLngLiteral, zoom?: number) => {
+          mapRef.current?.setView(center, zoom);
+        },
+        setZoom: (cb: (zoom: number) => number) => {
+          mapRef.current?.setZoom(cb(mapRef.current?.getZoom() ?? 0));
+        },
+      }),
+      [],
+    );
+
+    // Enable/disable scroll wheel zoom.
+    // TODO(burdon): Use attention:
+    // const {hasAttention} = useAttention(props.id);
+    useEffect(() => {
+      if (!map) {
+        return;
+      }
+
+      if (attention) {
+        map.scrollWheelZoom.enable();
+      } else {
+        map.scrollWheelZoom.disable();
+      }
+    }, [map, attention]);
+
+    return (
+      <MapContainer
+        {...props}
+        className={mx('group relative grid bg-base-surface!', classNames)}
+        attributionControl={false}
+        zoomControl={false}
+        scrollWheelZoom={scrollWheelZoom}
+        doubleClickZoom={doubleClickZoom}
+        touchZoom={touchZoom}
+        center={center ?? defaults.center}
+        zoom={zoom ?? defaults.zoom}
+        whenReady={() => {}}
+        ref={mapRef}
+      >
+        {children}
+      </MapContainer>
+    );
+  },
+);
+
+MapContent.displayName = 'Map.Content';
+
+//
+// Tiles
+// https://react-leaflet.js.org/docs/api-components/#tilelayer
+//
+
+const MAP_TILES_NAME = 'Map.Tiles';
+
+type MapTilesProps = {};
 
-  // Position.
+const MapTiles = (_props: MapTilesProps) => {
+  const ref = useRef<L.TileLayer>(null);
+  const { onChange } = useMapContext(MAP_TILES_NAME);
+
+  useMapEvents({
+    zoomstart: (ev) => {
+      onChange?.({
+        center: ev.target.getCenter(),
+        zoom: ev.target.getZoom(),
+      });
+    },
+  });
+
+  // NOTE: Need to dynamically update data attribute since TileLayer doesn't update, but
+  // Tailwind requires setting the property for static analysis.
+  const { attention } = useMapContext(MAP_TILES_NAME);
   useEffect(() => {
-    if (center) {
-      map.setView(center, zoom);
-    } else if (zoom !== undefined) {
-      map.setZoom(zoom);
+    if (ref.current) {
+      ref.current.getContainer().dataset.attention = attention ? '1' : '0';
     }
-  }, [center, zoom]);
+  }, [attention]);
 
-  // Events.
-  useEffect(() => {
-    const handler = debounce(() => {
-      onChange?.({ center: map.getCenter(), zoom: map.getZoom() });
-    }, 100);
-    map.on('move', handler);
-    map.on('zoom', handler);
-    return () => {
-      map.off('move', handler);
-      map.off('zoom', handler);
-    };
-  }, [map, onChange]);
+  // TODO(burdon): Option to add class 'invert'.
+  return (
+    <>
+      <TileLayer
+        ref={ref}
+        data-attention={attention}
+        detectRetina={true}
+        className='dark:grayscale dark:invert data-[attention="0"]:!opacity-80'
+        url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
+        keepBuffer={4}
+        // opacity={attention ? 1 : 0.7}
+      />
+
+      {/* Temperature map. */}
+      {/* <WMSTileLayer
+        url='https://gibs.earthdata.nasa.gov/wms/epsg4326/best/wms.cgi'
+        layers='MODIS_Terra_Land_Surface_Temp_Day'
+        format='image/png'
+        transparent={true}
+        version='1.3.0'
+        attribution='NASA GIBS'
+      /> */}
+
+      {/* US Weather. */}
+      {/* <WMSTileLayer
+        url='https://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r.cgi'
+        layers='nexrad-n0r' // layers='nexrad-n0r'
+        format='image/png'
+        transparent={true}
+      /> */}
+    </>
+  );
+};
+
+MapTiles.displayName = MAP_TILES_NAME;
+
+//
+// Markers
+//
+
+type MapMarkersProps = {
+  markers?: GeoMarker[];
+  selected?: string[];
+};
+
+const MapMarkers = ({ selected, markers }: MapMarkersProps) => {
+  const map = useMap();
 
   // Set the viewport around the markers, or show the whole world map if `markers` is empty.
   useEffect(() => {
@@ -117,14 +234,7 @@ const MapCanvas = forwardRef<MapController, MapCanvasProps>(({ markers, center,
   }, [markers]);
 
   return (
-    <div ref={ref} className='flex w-full h-full overflow-hidden bg-baseSurface'>
-      {/* Map tiles. */}
-      <TileLayer
-        className='dark:filter dark:grayscale dark:invert'
-        url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
-      />
-
-      {/* Markers. */}
+    <>
       {markers?.map(({ id, title, location: { lat, lng } }) => {
         return (
           <Marker
@@ -132,6 +242,7 @@ const MapCanvas = forwardRef<MapController, MapCanvasProps>(({ markers, center,
             position={{ lat, lng }}
             icon={
               // TODO(burdon): Create custom icon from bundled assets.
+              // TODO(burdon): Selection state.
               new L.Icon({
                 iconUrl: 'https://dxos.network/marker-icon.png',
                 iconRetinaUrl: 'https://dxos.network/marker-icon-2x.png',
@@ -147,9 +258,11 @@ const MapCanvas = forwardRef<MapController, MapCanvasProps>(({ markers, center,
           </Marker>
         );
       })}
-    </div>
+    </>
   );
-});
+};
+
+MapMarkers.displayName = 'Map.Markers';
 
 //
 // Controls
@@ -167,7 +280,7 @@ const CustomControl = ({
   useEffect(() => {
     const control = new Control({ position });
     control.onAdd = () => {
-      const container = DomUtil.create('div', mx('!m-0', controlPositions[position]));
+      const container = DomUtil.create('div', mx('m-0!', controlPositions[position]));
       DomEvent.disableClickPropagation(container);
       DomEvent.disableScrollPropagation(container);
 
@@ -192,23 +305,36 @@ const CustomControl = ({
 
 type MapControlProps = { position?: ControlPosition } & Pick<ControlProps, 'onAction'>;
 
+const MapZoom = ({ onAction, position = 'bottomleft', ...props }: MapControlProps) => (
+  <CustomControl position={position} {...props}>
+    <ZoomControls onAction={onAction} />
+  </CustomControl>
+);
+
+const MapAction = ({ onAction, position = 'bottomright', ...props }: MapControlProps) => (
+  <CustomControl position={position} {...props}>
+    <ActionControls onAction={onAction} />
+  </CustomControl>
+);
+
 //
 // Map
 //
 
 export const Map = {
   Root: MapRoot,
-  Canvas: MapCanvas,
-  Zoom: ({ onAction, position = 'bottomleft', ...props }: MapControlProps) => (
-    <CustomControl position={position} {...props}>
-      <ZoomControls onAction={onAction} />
-    </CustomControl>
-  ),
-  Action: ({ onAction, position = 'bottomright', ...props }: MapControlProps) => (
-    <CustomControl position={position} {...props}>
-      <ActionControls onAction={onAction} />
-    </CustomControl>
-  ),
+  Content: MapContent,
+  Tiles: MapTiles,
+  Markers: MapMarkers,
+  Zoom: MapZoom,
+  Action: MapAction,
 };
 
-export { type MapCanvasProps, type MapController };
+export {
+  type MapController,
+  type MapRootProps,
+  type MapContentProps,
+  type MapTilesProps,
+  type MapMarkersProps,
+  type MapControlProps,
+};

package/src/components/Toolbar/Controls.tsx

@@ -5,7 +5,9 @@
 import { type ControlPosition } from 'leaflet';
 import React from 'react';
 
-import { IconButton, type ThemedClassName, Toolbar } from '@dxos/react-ui';
+import { IconButton, type ThemedClassName, Toolbar, useTranslation } from '@dxos/react-ui';
+
+import { translationKey } from '#translations';
 
 export type ControlAction = 'toggle' | 'start' | 'zoom-in' | 'zoom-out';
 
@@ -21,24 +23,20 @@ export const controlPositions: Record<ControlPosition, string> = {
 };
 
 export const ZoomControls = ({ classNames, onAction }: ControlProps) => {
+  const { t } = useTranslation(translationKey);
+
   return (
-    <Toolbar.Root classNames={['gap-1', classNames]}>
+    <Toolbar.Root classNames={['gap-2', classNames]}>
       <IconButton
-        //
         icon='ph--plus--regular'
-        label='zoom in'
         iconOnly
-        size={5}
-        classNames='px-0 aspect-square'
+        label={t('zoom-in-icon.button')}
         onClick={() => onAction?.('zoom-in')}
       />
       <IconButton
-        //
         icon='ph--minus--regular'
-        label='zoom out'
         iconOnly
-        size={5}
-        classNames='px-0 aspect-square'
+        label={t('zoom-out-icon.button')}
         onClick={() => onAction?.('zoom-out')}
       />
     </Toolbar.Root>
@@ -46,24 +44,20 @@ export const ZoomControls = ({ classNames, onAction }: ControlProps) => {
 };
 
 export const ActionControls = ({ classNames, onAction }: ControlProps) => {
+  const { t } = useTranslation(translationKey);
+
   return (
-    <Toolbar.Root classNames={['gap-1', classNames]}>
+    <Toolbar.Root classNames={['gap-2', classNames]}>
       <IconButton
-        //
-        icon='ph--play--regular'
-        label='start'
+        icon='ph--path--regular'
         iconOnly
-        size={5}
-        classNames='px-0 aspect-square'
+        label={t('start-icon.button')}
         onClick={() => onAction?.('start')}
       />
       <IconButton
-        //
         icon='ph--globe-hemisphere-west--regular'
-        label='toggle'
         iconOnly
-        size={5}
-        classNames='px-0 aspect-square'
+        label={t('toggle-icon.button')}
         onClick={() => onAction?.('toggle')}
       />
     </Toolbar.Root>

package/src/components/index.ts

@@ -2,8 +2,6 @@
 // Copyright 2019 DXOS.org
 //
 
-export * from './types';
-
 export * from './Globe';
 export * from './Map';
 export * from './Toolbar';

package/src/hooks/context.tsx

@@ -2,57 +2,34 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { createContext, type Dispatch, type PropsWithChildren, type SetStateAction, useContext } from 'react';
+import { type Dispatch, type SetStateAction, createContext, useContext } from 'react';
 
 import { raise } from '@dxos/debug';
-import { useControlledState } from '@dxos/react-ui';
 
-import { type LatLng } from '../util';
+import { type LatLngLiteral } from '../types';
 
 // TODO(burdon): Factor out common geometry types.
 export type Size = { width: number; height: number };
+
 export type Point = { x: number; y: number };
+
 export type Vector = [number, number, number];
 
 export type GlobeContextType = {
   size: Size;
-  center: LatLng;
-  scale: number;
+  center?: LatLngLiteral;
+  zoom: number;
   translation: Point;
   rotation: Vector;
-  setCenter: Dispatch<SetStateAction<LatLng>>;
-  setScale: Dispatch<SetStateAction<number>>;
+  setCenter: Dispatch<SetStateAction<LatLngLiteral>>;
+  setZoom: Dispatch<SetStateAction<number>>;
   setTranslation: Dispatch<SetStateAction<Point>>;
   setRotation: Dispatch<SetStateAction<Vector>>;
 };
 
-const GlobeContext = createContext<GlobeContextType>(undefined);
-
-export type GlobeContextProviderProps = PropsWithChildren<
-  Partial<Pick<GlobeContextType, 'size' | 'center' | 'scale' | 'translation' | 'rotation'>>
->;
-
-export const GlobeContextProvider = ({
-  children,
-  size,
-  center: _center,
-  scale: _scale,
-  translation: _translation,
-  rotation: _rotation,
-}: GlobeContextProviderProps) => {
-  const [center, setCenter] = useControlledState(_center);
-  const [scale, setScale] = useControlledState(_scale);
-  const [translation, setTranslation] = useControlledState<Point>(_translation);
-  const [rotation, setRotation] = useControlledState<Vector>(_rotation);
-
-  return (
-    <GlobeContext.Provider
-      value={{ size, center, scale, translation, rotation, setCenter, setScale, setTranslation, setRotation }}
-    >
-      {children}
-    </GlobeContext.Provider>
-  );
-};
+/** @internal */
+// TODO(burdon): Replace with radix.
+export const GlobeContext = createContext<GlobeContextType>(undefined);
 
 export const useGlobeContext = () => {
   return useContext(GlobeContext) ?? raise(new Error('Missing GlobeContext'));

package/src/hooks/useGlobeZoomHandler.ts

@@ -4,7 +4,9 @@
 
 import { useCallback } from 'react';
 
-import { type GlobeController, type ControlProps } from '../components';
+import { type ControlProps, type GlobeController } from '../components';
+
+const ZOOM_FACTOR = 0.1;
 
 export const useGlobeZoomHandler = (controller: GlobeController | null | undefined): ControlProps['onAction'] => {
   return useCallback<ControlProps['onAction']>(
@@ -15,11 +17,15 @@ export const useGlobeZoomHandler = (controller: GlobeController | null | undefin
 
       switch (event) {
         case 'zoom-in': {
-          controller.setScale((scale) => scale * 1.1);
+          controller.setZoom((zoom) => {
+            return zoom * (1 + ZOOM_FACTOR);
+          });
           break;
         }
         case 'zoom-out': {
-          controller.setScale((scale) => scale * 0.9);
+          controller.setZoom((zoom) => {
+            return zoom * (1 - ZOOM_FACTOR);
+          });
           break;
         }
       }

package/src/hooks/useMapZoomHandler.ts

@@ -4,7 +4,7 @@
 
 import { useCallback } from 'react';
 
-import { type MapController, type ControlProps } from '../components';
+import { type ControlProps, type MapController } from '../components';
 
 export const useMapZoomHandler = (controller: MapController | null | undefined): ControlProps['onAction'] => {
   return useCallback<ControlProps['onAction']>(

package/src/hooks/useSpinner.ts

@@ -6,8 +6,8 @@ import { timer as d3Timer } from 'd3';
 import { type Timer } from 'd3';
 import { useEffect, useState } from 'react';
 
-import { type Vector } from './context';
 import { type GlobeController } from '../components';
+import { type Vector } from './context';
 
 export type SpinnerOptions = {
   disabled?: boolean;

package/src/hooks/useTour.ts

@@ -2,12 +2,13 @@
 // Copyright 2024 DXOS.org
 //
 
-import { geoPath, geoInterpolate, geoDistance, selection as d3Selection } from 'd3';
-import { type SetStateAction, type Dispatch, useEffect, useState, useMemo } from 'react';
+import { selection as d3Selection, geoDistance, geoInterpolate, geoPath } from 'd3';
+import { type Dispatch, type SetStateAction, useEffect, useMemo, useState } from 'react';
 import versor from 'versor';
 
 import type { GlobeController } from '../components';
-import { geoToPosition, type LatLng, positionToRotation, type StyleSet } from '../util';
+import { type LatLngLiteral } from '../types';
+import { type StyleSet, geoToPosition, positionToRotation } from '../util';
 
 const TRANSITION_NAME = 'globe-tour';
 
@@ -29,10 +30,11 @@ export type TourOptions = {
  */
 export const useTour = (
   controller?: GlobeController | null,
-  points?: LatLng[],
+  points?: LatLngLiteral[],
   options: TourOptions = {},
 ): [boolean, Dispatch<SetStateAction<boolean>>] => {
   const selection = useMemo(() => d3Selection(), []);
+  // TODO(burdon): Redo controlled state.
   const [running, setRunning] = useState(options.running ?? false);
   useEffect(() => {
     if (!running) {
@@ -48,7 +50,7 @@ export const useTour = (
         const path = geoPath(projection, context).pointRadius(2);
 
         const tilt = options.tilt ?? 0;
-        let last: LatLng;
+        let last: LatLngLiteral;
         try {
           const p = [...points];
           if (options.loop) {
@@ -82,14 +84,14 @@ export const useTour = (
                 {
                   context.beginPath();
                   context.strokeStyle = options?.styles?.arc?.strokeStyle ?? 'yellow';
-                  context.lineWidth = (options?.styles?.arc?.lineWidth ?? 1.5) * (controller?.scale ?? 1);
+                  context.lineWidth = (options?.styles?.arc?.lineWidth ?? 1.5) * (controller?.zoom ?? 1);
                   context.setLineDash(options?.styles?.arc?.lineDash ?? []);
                   path({ type: 'LineString', coordinates: [ip(t1), ip(t2)] });
                   context.stroke();
 
                   context.beginPath();
                   context.fillStyle = options?.styles?.cursor?.fillStyle ?? 'orange';
-                  path.pointRadius((options?.styles?.cursor?.pointRadius ?? 2) * (controller?.scale ?? 1));
+                  path.pointRadius((options?.styles?.cursor?.pointRadius ?? 2) * (controller?.zoom ?? 1));
                   path({ type: 'Point', coordinates: ip(t2) });
                   context.fill();
                 }
@@ -104,7 +106,7 @@ export const useTour = (
             await transition.end();
             last = next;
           }
-        } catch (err) {
+        } catch {
           // Ignore.
         } finally {
           setRunning(false);

package/src/index.ts

@@ -3,7 +3,6 @@
 //
 
 export * from './components';
-export * from './data';
 export * from './hooks';
-export * from './types';
+export type * from './types';
 export * from './util';