@dxos/react-ui-geo 0.8.4-main.84f28bd → 0.8.4-main.8baae0fced

package/src/components/Globe/Globe.tsx

@@ -4,14 +4,14 @@
 
 import {
   type GeoProjection,
+  easeLinear,
+  easeSinOut,
   geoMercator,
   geoOrthographic,
   geoPath,
   geoTransverseMercator,
   interpolateNumber,
   transition,
-  easeLinear,
-  easeSinOut,
 } from 'd3';
 import { type ControlPosition } from 'leaflet';
 import React, {
@@ -26,15 +26,17 @@ import React, {
 import { useResizeDetector } from 'react-resize-detector';
 import { type Topology } from 'topojson-specification';
 
-import { type ThemedClassName, type ThemeMode, useDynamicRef, useThemeContext } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
-
 import {
-  GlobeContextProvider,
-  type GlobeContextProviderProps,
-  type GlobeContextType,
-  useGlobeContext,
-} from '../../hooks';
+  type ThemeMode,
+  type ThemedClassName,
+  useComposedRefs,
+  useControlledState,
+  useDynamicRef,
+  useThemeContext,
+} from '@dxos/react-ui';
+import { composable, composableProps, mx } from '@dxos/ui-theme';
+
+import { GlobeContext, type GlobeContextType, type Point, type Vector, useGlobeContext } from '../../hooks';
 import {
   type Features,
   type StyleSet,
@@ -44,7 +46,7 @@ import {
   renderLayers,
   timer,
 } from '../../util';
-import { ZoomControls, ActionControls, type ControlProps, controlPositions } from '../Toolbar';
+import { ActionControls, type ControlProps, ZoomControls, controlPositions } from '../Toolbar';
 
 /**
  * https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute
@@ -103,7 +105,7 @@ const defaultStyles: Record<ThemeMode, StyleSet> = {
 export type GlobeController = {
   canvas: HTMLCanvasElement;
   projection: GeoProjection;
-} & Pick<GlobeContextType, 'scale' | 'translation' | 'rotation' | 'setScale' | 'setTranslation' | 'setRotation'>;
+} & Pick<GlobeContextType, 'zoom' | 'translation' | 'rotation' | 'setZoom' | 'setTranslation' | 'setRotation'>;
 
 export type ProjectionType = 'orthographic' | 'mercator' | 'transverse-mercator';
 
@@ -126,18 +128,52 @@ const getProjection = (type: GlobeCanvasProps['projection'] = 'orthographic'): G
 // Root
 //
 
-type GlobeRootProps = PropsWithChildren<ThemedClassName<GlobeContextProviderProps>>;
+const DEFAULT_ZOOM = 1.5;
 
-const GlobeRoot = ({ classNames, children, ...props }: GlobeRootProps) => {
-  const { ref, width, height } = useResizeDetector<HTMLDivElement>();
-  return (
-    <div ref={ref} className={mx('relative flex grow overflow-hidden', classNames)}>
-      <GlobeContextProvider size={{ width, height }} {...props}>
-        {children}
-      </GlobeContextProvider>
-    </div>
-  );
-};
+type GlobeRootProps = Partial<Pick<GlobeContextType, 'center' | 'zoom' | 'translation' | 'rotation'>>;
+
+const GlobeRoot = composable<HTMLDivElement, GlobeRootProps>(
+  (
+    {
+      children,
+      center: centerProp,
+      zoom: zoomProp = DEFAULT_ZOOM,
+      translation: translationProp,
+      rotation: rotationProp,
+      ...props
+    },
+    forwardedRef,
+  ) => {
+    const localRef = useRef<HTMLDivElement>(null);
+    const composedRef = useComposedRefs<HTMLDivElement>(localRef, forwardedRef);
+    const { width, height } = useResizeDetector<HTMLDivElement>({ targetRef: localRef });
+
+    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: { width, height },
+          center,
+          zoom,
+          translation,
+          rotation,
+          setCenter,
+          setZoom,
+          setTranslation,
+          setRotation,
+        }}
+      >
+        <div {...composableProps(props, { classNames: 'relative dx-container' })} ref={composedRef}>
+          {children}
+        </div>
+      </GlobeContext.Provider>
+    );
+  },
+);
 
 //
 // Canvas
@@ -154,17 +190,18 @@ type GlobeCanvasProps = {
  * Basic globe renderer.
  * https://github.com/topojson/world-atlas
  */
+// TODO(burdon): Move controller to root.
 const GlobeCanvas = forwardRef<GlobeController, GlobeCanvasProps>(
-  ({ projection: _projection, topology, features, styles: _styles }, forwardRef) => {
+  ({ projection: projectionProp, topology, features, styles: stylesProp }, forwardRef) => {
     const { themeMode } = useThemeContext();
-    const styles = useMemo(() => _styles ?? defaultStyles[themeMode], [_styles, themeMode]);
+    const styles = useMemo(() => stylesProp ?? defaultStyles[themeMode], [stylesProp, themeMode]);
 
     // Canvas.
     const [canvas, setCanvas] = useState<HTMLCanvasElement>(null);
     const canvasRef = (canvas: HTMLCanvasElement) => setCanvas(canvas);
 
     // Projection.
-    const projection = useMemo(() => getProjection(_projection), [_projection]);
+    const projection = useMemo(() => getProjection(projectionProp), [projectionProp]);
 
     // Layers.
     // TODO(burdon): Generate on the fly based on what is visible.
@@ -173,55 +210,50 @@ const GlobeCanvas = forwardRef<GlobeController, GlobeCanvasProps>(
     }, [topology, features, styles]);
 
     // State.
-    const { size, center, scale, translation, rotation, setCenter, setScale, setTranslation, setRotation } =
+    const { size, center, zoom, translation, rotation, setCenter, setZoom, setTranslation, setRotation } =
       useGlobeContext();
+    const zoomRef = useDynamicRef(zoom);
 
-    const scaleRef = useDynamicRef(scale);
-
-    // Update rotation.
+    // Update rotation when the center changes. Preserve current zoom — callers can set zoom
+    // independently via the `zoom` prop or `setZoom` on the controller.
     useEffect(() => {
       if (center) {
-        setScale(1);
         setRotation(positionToRotation(geoToPosition(center)));
       }
     }, [center]);
 
     // External controller.
     const zooming = useRef(false);
-    useImperativeHandle<GlobeController, GlobeController>(
-      forwardRef,
-      () => {
-        return {
-          canvas,
-          projection,
-          center,
-          get scale() {
-            return scaleRef.current;
-          },
-          translation,
-          rotation,
-          setCenter,
-          setScale: (s) => {
-            if (typeof s === 'function') {
-              const is = interpolateNumber(scaleRef.current, s(scaleRef.current));
-              // Stop easing if already zooming.
-              transition()
-                .ease(zooming.current ? easeLinear : easeSinOut)
-                .duration(200)
-                .tween('scale', () => (t) => setScale(is(t)))
-                .on('end', () => {
-                  zooming.current = false;
-                });
-            } else {
-              setScale(s);
-            }
-          },
-          setTranslation,
-          setRotation,
-        };
-      },
-      [canvas],
-    );
+    useImperativeHandle<GlobeController, GlobeController>(forwardRef, () => {
+      return {
+        canvas,
+        projection,
+        center,
+        get zoom() {
+          return zoomRef.current;
+        },
+        translation,
+        rotation,
+        setCenter,
+        setZoom: (state) => {
+          if (typeof state === 'function') {
+            const is = interpolateNumber(zoomRef.current, state(zoomRef.current));
+            // Stop easing if already zooming.
+            transition()
+              .ease(zooming.current ? easeLinear : easeSinOut)
+              .duration(200)
+              .tween('scale', () => (t) => setZoom(is(t)))
+              .on('end', () => {
+                zooming.current = false;
+              });
+          } else {
+            setZoom(state);
+          }
+        },
+        setTranslation,
+        setRotation,
+      };
+    }, [canvas]);
 
     // https://d3js.org/d3-geo/path#geoPath
     // https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext
@@ -236,14 +268,14 @@ const GlobeCanvas = forwardRef<GlobeController, GlobeCanvasProps>(
         timer(() => {
           // https://d3js.org/d3-geo/projection
           projection
-            .scale((Math.min(size.width, size.height) / 2) * scale)
+            .scale((Math.min(size.width, size.height) / 2) * zoom)
             .translate([size.width / 2 + (translation?.x ?? 0), size.height / 2 + (translation?.y ?? 0)])
             .rotate(rotation ?? [0, 0, 0]);
 
-          renderLayers(generator, layers, scale, styles);
+          renderLayers(generator, layers, zoom, styles);
         });
       }
-    }, [generator, size, scale, translation, rotation, layers]);
+    }, [generator, size, zoom, translation, rotation, layers]);
 
     if (!size.width || !size.height) {
       return null;
@@ -253,22 +285,30 @@ const GlobeCanvas = forwardRef<GlobeController, GlobeCanvasProps>(
   },
 );
 
+//
+// Debug
+//
+
 const GlobeDebug = ({ position = 'topleft' }: { position?: ControlPosition }) => {
-  const { size, scale, translation, rotation } = useGlobeContext();
+  const { size, zoom, translation, rotation } = useGlobeContext();
   return (
     <div
       className={mx(
-        'z-10 absolute w-96 p-2 overflow-hidden border border-green-700 rounded',
+        'z-10 absolute w-96 p-2 overflow-hidden border border-green-700 rounded-sm',
         controlPositions[position],
       )}
     >
       <pre className='font-mono text-xs text-green-700'>
-        {JSON.stringify({ size, scale, translation, rotation }, null, 2)}
+        {JSON.stringify({ size, zoom, translation, rotation }, null, 2)}
       </pre>
     </div>
   );
 };
 
+//
+// Panel
+//
+
 const GlobePanel = ({
   position,
   classNames,
@@ -277,25 +317,37 @@ const GlobePanel = ({
   return <div className={mx('z-10 absolute overflow-hidden', controlPositions[position], classNames)}>{children}</div>;
 };
 
+//
+// Controls
+//
+
 const CustomControl = ({ position, children }: PropsWithChildren<{ position: ControlPosition }>) => {
   return <div className={mx('z-10 absolute overflow-hidden', controlPositions[position])}>{children}</div>;
 };
 
 type GlobeControlProps = { position?: ControlPosition } & Pick<ControlProps, 'onAction'>;
 
+const GlobeZoom = ({ onAction, position = 'bottomleft', ...props }: GlobeControlProps) => (
+  <CustomControl position={position} {...props}>
+    <ZoomControls onAction={onAction} />
+  </CustomControl>
+);
+
+const GlobeAction = ({ onAction, position = 'bottomright', ...props }: GlobeControlProps) => (
+  <CustomControl position={position} {...props}>
+    <ActionControls onAction={onAction} />
+  </CustomControl>
+);
+
+//
+// Globe
+//
+
 export const Globe = {
   Root: GlobeRoot,
   Canvas: GlobeCanvas,
-  Zoom: ({ onAction, position = 'bottomleft', ...props }: GlobeControlProps) => (
-    <CustomControl position={position} {...props}>
-      <ZoomControls onAction={onAction} />
-    </CustomControl>
-  ),
-  Action: ({ onAction, position = 'bottomright', ...props }: GlobeControlProps) => (
-    <CustomControl position={position} {...props}>
-      <ActionControls onAction={onAction} />
-    </CustomControl>
-  ),
+  Zoom: GlobeZoom,
+  Action: GlobeAction,
   Debug: GlobeDebug,
   Panel: GlobePanel,
 };

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

@@ -2,45 +2,57 @@
 // Copyright 2024 DXOS.org
 //
 
-import '@dxos-theme';
-
-import { type StoryObj, type Meta } from '@storybook/react-vite';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useState } from 'react';
 
-import { withLayout, withTheme } from '@dxos/storybook-utils';
+import { withLayout, 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.Zoom position='bottomleft' onAction={handleZoomAction} />
-      <Map.Action position='bottomright' />
+      <Map.Content ref={setController}>
+        <Map.Tiles />
+        <Map.Markers markers={markers} />
+        <Map.Zoom position='bottomleft' onAction={handleZoomAction} />
+        <Map.Action position='bottomright' />
+      </Map.Content>
     </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(), withLayout({ layout: 'fullscreen' })],
+  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 +68,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[],
   },
 };