@dxos/react-ui-geo 0.8.4-main.fd6878d → 0.8.4-staging.ac66bdf99f

package/src/components/Map/Map.tsx

@@ -6,14 +6,12 @@ import 'leaflet/dist/leaflet.css';
 
 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 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 { MapContainer, type MapContainerProps, Marker, Popup, TileLayer, useMap, useMapEvents } from 'react-leaflet';
 
-import { debounce } from '@dxos/async';
-import { ThemeProvider, type ThemedClassName, Tooltip } 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 { type GeoMarker } from '../../types';
 import { ActionControls, type ControlProps, ZoomControls, controlPositions } from '../Toolbar';
@@ -25,7 +23,7 @@ import { ActionControls, type ControlProps, ZoomControls, controlPositions } fro
 const defaults = {
   center: { lat: 51, lng: 0 } as L.LatLngLiteral,
   zoom: 4,
-};
+} as const;
 
 //
 // Controller
@@ -42,38 +40,57 @@ type MapController = {
 
 type MapContextValue = {
   attention?: boolean;
+  onChange?: (ev: { center: LatLngLiteral; zoom: number }) => void;
 };
 
-const [MapContextProvier, useMapContext] = createContext<MapContextValue>('Map');
+const [MapContextProvider, useMapContext] = createContext<MapContextValue>('Map');
 
 //
 // Root
 //
 
-type MapRootProps = ThemedClassName<
-  MapContainerProps & {
-    onChange?: (ev: { center: LatLngLiteral; zoom: number }) => void;
-  }
->;
+type MapRootProps = Pick<MapContextValue, 'onChange'>;
+
+/**
+ * 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 (
+    <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';
+
+//
+// Content
+//
+
+type MapContentProps = ThemedClassName<Omit<MapContainerProps, 'children'> & PropsWithChildren>;
 
 /**
  * https://react-leaflet.js.org/docs/api-map
  */
-const MapRoot = forwardRef<MapController, MapRootProps>(
+const MAP_CONTENT_NAME = 'Map.Content';
+
+const MapContent = forwardRef<MapController, MapContentProps>(
   (
-    {
-      classNames,
-      scrollWheelZoom = true,
-      doubleClickZoom = true,
-      touchZoom = true,
-      center = defaults.center,
-      zoom = defaults.zoom,
-      onChange,
-      ...props
-    },
+    { classNames, scrollWheelZoom = true, doubleClickZoom = true, touchZoom = true, center, zoom, children, ...props },
     forwardedRef,
   ) => {
-    const [attention, setAttention] = useState(false);
+    const { attention } = useMapContext(MAP_CONTENT_NAME);
     const mapRef = useRef<L.Map>(null);
     const map = mapRef.current;
 
@@ -90,32 +107,6 @@ const MapRoot = forwardRef<MapController, MapRootProps>(
       [],
     );
 
-    // Events.
-    useEffect(() => {
-      if (!map) {
-        return;
-      }
-
-      const handler = debounce(() => {
-        setAttention(true);
-        onChange?.({
-          center: map.getCenter(),
-          zoom: map.getZoom(),
-        });
-      }, 100);
-
-      map.on('move', handler);
-      map.on('zoom', handler);
-      map.on('focus', () => setAttention(true));
-      map.on('blur', () => setAttention(false));
-      return () => {
-        map.off('move');
-        map.off('zoom');
-        map.off('focus');
-        map.off('blur');
-      };
-    }, [map, onChange]);
-
     // Enable/disable scroll wheel zoom.
     // TODO(burdon): Use attention:
     // const {hasAttention} = useAttention(props.id);
@@ -132,40 +123,52 @@ const MapRoot = forwardRef<MapController, MapRootProps>(
     }, [map, attention]);
 
     return (
-      <MapContextProvier attention={attention}>
-        <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}
-          zoom={zoom}
-          // whenReady={() => {}}
-        />
-      </MapContextProvier>
+      <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>
     );
   },
 );
 
-MapRoot.displayName = 'Map.Root';
+MapContent.displayName = 'Map.Content';
 
 //
 // 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);
+
+  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(MapTiles.displayName);
+  const { attention } = useMapContext(MAP_TILES_NAME);
   useEffect(() => {
     if (ref.current) {
       ref.current.getContainer().dataset.attention = attention ? '1' : '0';
@@ -206,7 +209,7 @@ const MapTiles = (_props: MapTilesProps) => {
   );
 };
 
-MapTiles.displayName = 'Map.Tiles';
+MapTiles.displayName = MAP_TILES_NAME;
 
 //
 // Markers
@@ -277,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);
 
@@ -320,10 +323,18 @@ const MapAction = ({ onAction, position = 'bottomright', ...props }: MapControlP
 
 export const Map = {
   Root: MapRoot,
+  Content: MapContent,
   Tiles: MapTiles,
   Markers: MapMarkers,
   Zoom: MapZoom,
   Action: MapAction,
 };
 
-export { type MapController, type MapRootProps, type MapTilesProps, type MapMarkersProps, type MapControlProps };
+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,22 +23,20 @@ export const controlPositions: Record<ControlPosition, string> = {
 };
 
 export const ZoomControls = ({ classNames, onAction }: ControlProps) => {
+  const { t } = useTranslation(translationKey);
+
   return (
     <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>
@@ -44,22 +44,20 @@ export const ZoomControls = ({ classNames, onAction }: ControlProps) => {
 };
 
 export const ActionControls = ({ classNames, onAction }: ControlProps) => {
+  const { t } = useTranslation(translationKey);
+
   return (
     <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/hooks/context.tsx

@@ -2,16 +2,17 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { type Dispatch, type PropsWithChildren, type SetStateAction, createContext, 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 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 = {
@@ -26,33 +27,9 @@ export type GlobeContextType = {
   setRotation: Dispatch<SetStateAction<Vector>>;
 };
 
-const GlobeContext = createContext<GlobeContextType>(undefined);
-
-export type GlobeContextProviderProps = PropsWithChildren<
-  Partial<Pick<GlobeContextType, 'size' | 'center' | 'zoom' | 'translation' | 'rotation'>>
->;
-
-export const GlobeContextProvider = ({
-  children,
-  size,
-  center: _center,
-  zoom: _zoom,
-  translation: _translation,
-  rotation: _rotation,
-}: GlobeContextProviderProps) => {
-  const [center, setCenter] = useControlledState(_center);
-  const [zoom, setZoom] = useControlledState(_zoom);
-  const [translation, setTranslation] = useControlledState<Point>(_translation);
-  const [rotation, setRotation] = useControlledState<Vector>(_rotation);
-
-  return (
-    <GlobeContext.Provider
-      value={{ size, center, zoom, translation, rotation, setCenter, setZoom, 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

@@ -6,6 +6,8 @@ import { useCallback } from 'react';
 
 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']>(
     (event) => {
@@ -15,11 +17,15 @@ export const useGlobeZoomHandler = (controller: GlobeController | null | undefin
 
       switch (event) {
         case 'zoom-in': {
-          controller.setZoom((zoom) => zoom * 1.1);
+          controller.setZoom((zoom) => {
+            return zoom * (1 + ZOOM_FACTOR);
+          });
           break;
         }
         case 'zoom-out': {
-          controller.setZoom((zoom) => zoom * 0.9);
+          controller.setZoom((zoom) => {
+            return zoom * (1 - ZOOM_FACTOR);
+          });
           break;
         }
       }

package/src/hooks/useSpinner.ts

@@ -7,7 +7,6 @@ import { type Timer } from 'd3';
 import { useEffect, useState } from 'react';
 
 import { type GlobeController } from '../components';
-
 import { type Vector } from './context';
 
 export type SpinnerOptions = {

package/src/hooks/useTour.ts

@@ -34,6 +34,7 @@ export const useTour = (
   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) {

package/src/index.ts

@@ -5,5 +5,6 @@
 export * from './components';
 export * from './data';
 export * from './hooks';
+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 = '@dxos/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/util/render.ts

@@ -7,7 +7,6 @@ import { feature, mesh } from 'topojson-client';
 import { type Topology } from 'topojson-specification';
 
 import { type LatLngLiteral } from '../types';
-
 import { geoLine, geoPoint } from './path';
 
 export type Styles = Record<string, any>;