@dxos/react-ui-geo 0.8.3 → 0.8.4-main.1068cf700f

package/src/components/Map/Map.stories.tsx

@@ -2,45 +2,56 @@
 // Copyright 2024 DXOS.org
 //
 
-import '@dxos-theme';
-
-import { type StoryObj, type Meta } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useState } from 'react';
 
-import { withLayout, withTheme } from '@dxos/storybook-utils';
+import { withTheme } from '@dxos/react-ui/testing';
 
-import { Map, type MapController } from './Map';
 import { useMapZoomHandler } from '../../hooks';
-import { type MapMarker } from '../../types';
+import { type GeoMarker } from '../../types';
+
+import { Map, type MapController } from './Map';
 
-const DefaultStory = ({ markers = [] }: { markers?: MapMarker[] }) => {
+const DefaultStory = ({ markers = [] }: { markers?: GeoMarker[] }) => {
   const [controller, setController] = useState<MapController>();
   const handleZoomAction = useMapZoomHandler(controller);
 
   return (
-    <Map.Root>
-      <Map.Canvas ref={setController} markers={markers} />
+    <Map.Root ref={setController}>
+      <Map.Tiles />
+      <Map.Markers markers={markers} />
       <Map.Zoom position='bottomleft' onAction={handleZoomAction} />
       <Map.Action position='bottomright' />
     </Map.Root>
   );
 };
 
-const meta: Meta<typeof DefaultStory> = {
+const meta = {
   title: 'ui/react-ui-geo/Map',
+  component: Map.Root as any,
   render: DefaultStory,
-  decorators: [withTheme, withLayout({ fullscreen: true })],
-};
+  decorators: [withTheme()],
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof DefaultStory>;
 
 export default meta;
 
-type Story = StoryObj<typeof DefaultStory>;
+type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};
 
 export const WithMarkers: Story = {
   args: {
     markers: [
+      { id: 'los angeles', title: 'Los Angeles', location: { lat: 34.0522, lng: -118.2437 } },
+      { id: 'new york', title: 'New York', location: { lat: 40.7128, lng: -74.006 } },
+      { id: 'warsaw', title: 'Warsaw', location: { lat: 52.2297, lng: 21.0122 } },
+      { id: 'london', title: 'London', location: { lat: 51.5074, lng: -0.1278 } },
+      { id: 'toronto', title: 'Toronto', location: { lat: 43.6532, lng: -79.3832 } },
+      { id: 'seattle', title: 'Seattle', location: { lat: 47.6062, lng: -122.3321 } },
+      { id: 'barcelona', title: 'Barcelona', location: { lat: 41.3851, lng: 2.1734 } },
       { id: 'tokyo', title: 'Tokyo', location: { lat: 35.6762, lng: 139.6503 } },
       { id: 'sydney', title: 'Sydney', location: { lat: -33.8688, lng: 151.2093 } },
       { id: 'auckland', title: 'Auckland', location: { lat: -36.8509, lng: 174.7645 } },
@@ -56,6 +67,6 @@ export const WithMarkers: Story = {
       { id: 'phnom-penh', title: 'Phnom Penh', location: { lat: 11.5564, lng: 104.9282 } },
       { id: 'vientiane', title: 'Vientiane', location: { lat: 17.9757, lng: 102.6331 } },
       { id: 'yangon', title: 'Yangon', location: { lat: 16.8661, lng: 96.1951 } },
-    ] as MapMarker[],
+    ] as GeoMarker[],
   },
 };

package/src/components/Map/Map.tsx

@@ -2,109 +2,195 @@
 // 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 { defaultTx, mx } from '@dxos/react-ui-theme';
+import { ThemeProvider, type ThemedClassName, Tooltip } from '@dxos/react-ui';
+import { 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;
 
 //
-// 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
+//
+
+const MAP_TILES_NAME = 'Map.Tiles';
+
+type MapTilesProps = {};
+
+const MapTiles = (_props: MapTilesProps) => {
+  const ref = useRef<L.TileLayer>(null);
+  const { onChange } = useMapContext(MAP_TILES_NAME);
 
-  // Position.
+  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 +203,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 +211,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 +227,11 @@ const MapCanvas = forwardRef<MapController, MapCanvasProps>(({ markers, center,
           </Marker>
         );
       })}
-    </div>
+    </>
   );
-});
+};
+
+MapMarkers.displayName = 'Map.Markers';
 
 //
 // Controls
@@ -192,23 +274,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: centerProp = defaults.center,
+  zoom: zoomProp = defaults.zoom,
+  translation: translationProp,
+  rotation: rotationProp,
 }: 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(centerProp);
+  const [zoom, setZoom] = useControlledState(zoomProp);
+  const [translation, setTranslation] = useControlledState<Point>(translationProp);
+  const [rotation, setRotation] = useControlledState<Vector>(rotationProp);
 
   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;