@dxos/react-ui-geo 0.8.4-main.f9ba587 → 0.8.4-main.fffef41

package/src/components/Map/Map.tsx

@@ -2,109 +2,193 @@
 // 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, useState } 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 { ThemeProvider, type ThemedClassName, Tooltip } from '@dxos/react-ui';
 import { defaultTx, mx } from '@dxos/react-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;
 
 //
-// Root
+// Controller
 //
 
-type MapRootProps = ThemedClassName<MapContainerProps>;
-
-// https://react-leaflet.js.org/docs/api-map
-const MapRoot = ({ classNames, center = defaults.center, zoom = defaults.zoom, ...props }: MapRootProps) => {
-  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}
-    />
-  );
+type MapController = {
+  setCenter: (center: LatLngLiteral, zoom?: number) => void;
+  setZoom: (cb: (zoom: number) => number) => void;
 };
 
 //
-// Control
+// Context
 //
 
-// TODO(burdon): Normalize with Globe.
-type MapController = {
-  setCenter: (center: LatLngExpression, zoom?: number) => void;
-  setZoom: (cb: (zoom: number) => number) => void;
+type MapContextValue = {
+  attention?: boolean;
+  onChange?: (ev: { center: LatLngLiteral; zoom: number }) => void;
 };
 
-const MapCanvas = forwardRef<MapController, MapCanvasProps>(({ markers, center, zoom, onChange }, forwardedRef) => {
-  const { ref, width, height } = useResizeDetector({ refreshRate: 200 });
-  const map = useMap();
+const [MapContextProvier, useMapContext] = createContext<MapContextValue>('Map');
+
+//
+// Root
+//
 
-  useImperativeHandle(
+type MapRootProps = ThemedClassName<MapContainerProps & Pick<MapContextValue, 'onChange'>>;
+
+/**
+ * https://react-leaflet.js.org/docs/api-map
+ */
+const MapRoot = forwardRef<MapController, MapRootProps>(
+  (
+    { classNames, scrollWheelZoom = true, doubleClickZoom = true, touchZoom = true, center, zoom, onChange, ...props },
     forwardedRef,
-    () => ({
-      setCenter: (center: LatLngExpression, zoom?: number) => {
-        map.setView(center, zoom);
-      },
-      setZoom: (cb) => {
-        map.setZoom(cb(map.getZoom()));
-      },
-    }),
-    [map],
-  );
+  ) => {
+    const [attention, setAttention] = useState(false);
+    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 (
+      <MapContextProvier attention={attention} onChange={onChange}>
+        <MapContainer
+          {...props}
+          ref={mapRef}
+          className={mx('group relative grid bs-full is-full !bg-baseSurface dx-focus-ring-inset', classNames)}
+          attributionControl={false}
+          zoomControl={false}
+          scrollWheelZoom={scrollWheelZoom}
+          doubleClickZoom={doubleClickZoom}
+          touchZoom={touchZoom}
+          center={center ?? defaults.center}
+          zoom={zoom ?? defaults.zoom}
+          // whenReady={() => {}}
+        />
+      </MapContextProvier>
+    );
+  },
+);
+
+MapRoot.displayName = 'Map.Root';
+
+//
+// Tiles
+// https://react-leaflet.js.org/docs/api-components/#tilelayer
+//
+
+type MapTilesProps = {};
+
+const MapTiles = (_props: MapTilesProps) => {
+  const ref = useRef<L.TileLayer>(null);
+  const { onChange } = useMapContext(MapTiles.displayName);
+
+  useMapEvents({
+    zoomstart: (ev) => {
+      onChange?.({
+        center: ev.target.getCenter(),
+        zoom: ev.target.getZoom(),
+      });
+    },
+  });
 
-  // Position.
+  // NOTE: Need to dynamically update data attribute since TileLayer doesn't update, but
+  // Tailwind requires setting the property for static analysis.
+  const { attention } = useMapContext(MapTiles.displayName);
   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';
+
+//
+// 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 +201,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 +209,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 +225,11 @@ const MapCanvas = forwardRef<MapController, MapCanvasProps>(({ markers, center,
           </Marker>
         );
       })}
-    </div>
+    </>
   );
-});
+};
+
+MapMarkers.displayName = 'Map.Markers';
 
 //
 // Controls
@@ -192,23 +272,28 @@ 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>
-  ),
+  Tiles: MapTiles,
+  Markers: MapMarkers,
+  Zoom: MapZoom,
+  Action: MapAction,
 };
 
-export { type MapCanvasProps, type MapController };
+export { type MapController, type MapRootProps, 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,12 +2,12 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { createContext, type Dispatch, type PropsWithChildren, type SetStateAction, useContext } from 'react';
+import React, { type Dispatch, type PropsWithChildren, 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 };
@@ -16,38 +16,44 @@ 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 defaults = {
+  center: { lat: 51, lng: 0 } as LatLngLiteral,
+  zoom: 4,
+} as const;
+
+// TODO(burdon): Replace with radix.
 const GlobeContext = createContext<GlobeContextType>(undefined);
 
 export type GlobeContextProviderProps = PropsWithChildren<
-  Partial<Pick<GlobeContextType, 'size' | 'center' | 'scale' | 'translation' | 'rotation'>>
+  Partial<Pick<GlobeContextType, 'size' | 'center' | 'zoom' | 'translation' | 'rotation'>>
 >;
 
 export const GlobeContextProvider = ({
   children,
   size,
-  center: _center,
-  scale: _scale,
-  translation: _translation,
-  rotation: _rotation,
+  center: centerParam = defaults.center,
+  zoom: zoomParam = defaults.zoom,
+  translation: translationParam,
+  rotation: rotationParam,
 }: GlobeContextProviderProps) => {
-  const [center, setCenter] = useControlledState(_center);
-  const [scale, setScale] = useControlledState(_scale);
-  const [translation, setTranslation] = useControlledState<Point>(_translation);
-  const [rotation, setRotation] = useControlledState<Vector>(_rotation);
+  const [center, setCenter] = useControlledState(centerParam);
+  const [zoom, setZoom] = useControlledState(zoomParam);
+  const [translation, setTranslation] = useControlledState<Point>(translationParam);
+  const [rotation, setRotation] = useControlledState<Vector>(rotationParam);
 
   return (
     <GlobeContext.Provider
-      value={{ size, center, scale, translation, rotation, setCenter, setScale, setTranslation, setRotation }}
+      value={{ size, center, zoom, translation, rotation, setCenter, setZoom, setTranslation, setRotation }}
     >
       {children}
     </GlobeContext.Provider>

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,9 +6,10 @@ 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;
   delta?: Vector;

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

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

package/src/translations.ts

@@ -0,0 +1,20 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Resource } from '@dxos/react-ui';
+
+export const translationKey = 'react-ui-geo';
+
+export const translations = [
+  {
+    'en-US': {
+      [translationKey]: {
+        'zoom in icon button': 'Zoom in',
+        'zoom out icon button': 'Zoom out',
+        'start icon button': 'Start',
+        'toggle icon button': 'Toggle',
+      },
+    },
+  },
+] as const satisfies Resource[];

package/src/types.ts

@@ -4,7 +4,9 @@
 
 import { type LatLngLiteral } from 'leaflet';
 
-export type MapMarker = {
+export { type LatLngLiteral };
+
+export type GeoMarker = {
   id: string;
   title?: string;
   location: LatLngLiteral;

package/src/util/inertia.ts

@@ -4,7 +4,7 @@
 // https://github.com/Fil/d3-inertia
 //
 
-import { select, drag, timer } from 'd3';
+import { drag, select, timer } from 'd3';
 import versor from 'versor';
 
 export const restrictAxis =