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

package/package.json

@@ -1,20 +1,26 @@
 {
   "name": "@dxos/react-ui-geo",
-  "version": "0.8.3",
+  "version": "0.8.4-main.1068cf700f",
   "description": "Geo components.",
   "homepage": "https://github.com/dxos",
   "bugs": "https://github.com/dxos/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dxos/dxos"
+  },
   "license": "MIT",
   "author": "DXOS.org",
   "sideEffects": true,
   "type": "module",
   "exports": {
     "./data": {
+      "source": "./src/data.ts",
       "types": "./dist/types/src/data.d.ts",
       "browser": "./dist/lib/browser/data.mjs",
       "node": "./dist/lib/node-esm/data.mjs"
     },
     ".": {
+      "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts",
       "browser": "./dist/lib/browser/index.mjs",
       "node": "./dist/lib/node-esm/index.mjs"
@@ -34,51 +40,51 @@
     "src"
   ],
   "dependencies": {
-    "@preact-signals/safe-react": "^0.9.0",
+    "@radix-ui/react-context": "1.1.1",
     "d3": "^7.9.0",
     "d3-geo-projection": "^4.0.0",
     "d3-hexbin": "^0.2.2",
     "geojson": "^0.5.0",
     "leaflet": "^1.9.4",
     "lodash.defaultsdeep": "^4.6.1",
-    "react-leaflet": "^4.2.1",
+    "react-leaflet": "^5.0.0",
     "react-resize-detector": "^11.0.1",
     "topojson-client": "^3.1.0",
     "topojson-simplify": "^3.0.3",
     "versor": "^0.2.0",
-    "@dxos/async": "0.8.3",
-    "@dxos/log": "0.8.3",
-    "@dxos/debug": "0.8.3",
-    "@dxos/util": "0.8.3",
-    "@dxos/node-std": "0.8.3"
+    "@dxos/debug": "0.8.4-main.1068cf700f",
+    "@dxos/async": "0.8.4-main.1068cf700f",
+    "@dxos/node-std": "0.8.4-main.1068cf700f",
+    "@dxos/util": "0.8.4-main.1068cf700f",
+    "@dxos/log": "0.8.4-main.1068cf700f"
   },
   "devDependencies": {
-    "@react-three/drei": "^9.99.0",
-    "@react-three/fiber": "^8.15.0",
+    "@react-three/drei": "^10.7.7",
+    "@react-three/fiber": "^9.5.0",
     "@types/d3": "^7.4.3",
     "@types/geojson": "^7946.0.14",
     "@types/leaflet": "^1.9.16",
-    "@types/react": "~18.2.0",
-    "@types/react-dom": "~18.2.0",
+    "@types/react": "~19.2.7",
+    "@types/react-dom": "~19.2.3",
     "@types/three": "0.165.0",
     "@types/topojson-client": "^3.1.4",
     "@types/topojson-simplify": "^3.0.3",
     "@types/topojson-specification": "^1.0.5",
     "JSONStream": "^1.3.5",
     "geojson2h3": "^1.2.0",
-    "leva": "^0.9.35",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "three": "0.165.0",
-    "@dxos/react-ui": "0.8.3",
-    "@dxos/react-ui-theme": "0.8.3",
-    "@dxos/storybook-utils": "0.8.3"
+    "leva": "^0.10.1",
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "three": "^0.178.0",
+    "@dxos/react-ui": "0.8.4-main.1068cf700f",
+    "@dxos/ui-theme": "0.8.4-main.1068cf700f",
+    "@dxos/storybook-utils": "0.8.4-main.1068cf700f"
   },
   "peerDependencies": {
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.3",
-    "@dxos/react-ui-theme": "0.8.3"
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "@dxos/react-ui": "0.8.4-main.1068cf700f",
+    "@dxos/ui-theme": "0.8.4-main.1068cf700f"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Globe/Globe.stories.tsx

@@ -2,22 +2,22 @@
 // Copyright 2018 DXOS.org
 //
 
-import '@dxos-theme';
-
-import { type Meta } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { type FeatureCollection, type Geometry, type Position } from 'geojson';
 import { Leva } from 'leva';
 import React, { useMemo, useRef, useState } from 'react';
 import { type Topology } from 'topojson-specification';
 
 import { useAsyncState } from '@dxos/react-ui';
-import { withTheme, withLayout } from '@dxos/storybook-utils';
+import { withTheme } from '@dxos/react-ui/testing';
 
-import { Globe, type GlobeCanvasProps, type GlobeController, type GlobeRootProps } from './Globe';
-import { useDrag, useGlobeZoomHandler, useSpinner, useTour, type Vector } from '../../hooks';
-import { closestPoint, type LatLng, type StyleSet } from '../../util';
+import { type Vector, useDrag, useGlobeZoomHandler, useSpinner, useTour } from '../../hooks';
+import { type LatLngLiteral } from '../../types';
+import { type StyleSet, closestPoint } from '../../util';
 import { type ControlProps } from '../Toolbar';
 
+import { Globe, type GlobeCanvasProps, type GlobeController, type GlobeRootProps } from './Globe';
+
 // TODO(burdon): Load from JSON at runtime?
 const useTopology = () => {
   return useAsyncState(async () => (await import('../../../data/countries-110m.ts')).default);
@@ -95,8 +95,11 @@ const createTrip = (
   routes: Record<string, string[]>,
   points: Position[] = [],
 ) => {
-  let previousHub: LatLng;
-  return Object.entries(routes).reduce<{ points: LatLng[]; lines: { source: LatLng; target: LatLng }[] }>(
+  let previousHub: LatLngLiteral;
+  return Object.entries(routes).reduce<{
+    points: LatLngLiteral[];
+    lines: { source: LatLngLiteral; target: LatLngLiteral }[];
+  }>(
     (features, [hub, regional]) => {
       const hubAirport = airports.features.find(({ properties }) => properties.iata === hub);
       if (hubAirport) {
@@ -125,7 +128,7 @@ const createTrip = (
   );
 };
 
-type StoryProps = Pick<GlobeRootProps, 'scale' | 'translation' | 'rotation'> &
+type StoryProps = Pick<GlobeRootProps, 'zoom' | 'translation' | 'rotation'> &
   Pick<GlobeCanvasProps, 'projection' | 'styles'> & {
     drag?: boolean;
     spin?: boolean;
@@ -133,12 +136,12 @@ type StoryProps = Pick<GlobeRootProps, 'scale' | 'translation' | 'rotation'> &
     xAxis?: boolean;
   };
 
-const Story = ({
-  scale: _scale = 1,
+const DefaultStory = ({
+  zoom: _zoom = 1,
   translation,
   rotation = [0, 0, 0],
   projection,
-  styles,
+  styles = defaultStyles,
   drag = false,
   spin = false,
   tour = false,
@@ -154,6 +157,7 @@ const Story = ({
   });
   const [topology] = useTopology();
   const [airports] = useAsyncState(async () => (await import('../../../data/airports.ts')).default);
+
   const features = useMemo(() => {
     return airports ? createTrip(airports, routes, (dots?.objects.dots as any)?.geometries[0].coordinates) : undefined;
   }, [airports, routes, dots]);
@@ -188,18 +192,18 @@ const Story = ({
         break;
       }
       case 'zoom-in': {
-        controller.current.setScale((scale) => scale * 1.1);
+        controller.current.setZoom((scale) => scale * 1.1);
         break;
       }
       case 'zoom-out': {
-        controller.current.setScale((scale) => scale * 0.9);
+        controller.current.setZoom((scale) => scale * 0.9);
         break;
       }
     }
   };
 
   return (
-    <Globe.Root classNames='absolute inset-0' scale={_scale} translation={translation} rotation={rotation}>
+    <Globe.Root classNames='absolute inset-0' zoom={_zoom} translation={translation} rotation={rotation}>
       <Globe.Canvas
         ref={controller}
         topology={styles?.dots ? dots : topology}
@@ -210,7 +214,7 @@ const Story = ({
       <Globe.Zoom onAction={handleAction} />
       <Globe.Action onAction={handleAction} />
       <Globe.Debug />
-      <Globe.Panel position='topright' classNames='w-20 h-20'>
+      <Globe.Panel position='topright' classNames='is-20 bs-20'>
         <Leva />
       </Globe.Panel>
     </Globe.Root>
@@ -219,11 +223,15 @@ const Story = ({
 
 const initialRotation: Vector = [0, -40, 0];
 
-const meta: Meta = {
+const meta = {
   title: 'ui/react-ui-geo/Globe',
   component: Globe.Root,
-  decorators: [withTheme, withLayout({ fullscreen: true, classNames: 'bg-[#000]' })],
-};
+  render: DefaultStory,
+  decorators: [withTheme()],
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta;
 
 export default meta;
 
@@ -234,8 +242,8 @@ export const Earth1 = () => {
   useDrag(controller);
 
   return (
-    <Globe.Root scale={1.2} rotation={[Math.random() * 360, 0, 0]}>
-      <Globe.Canvas ref={setController} topology={topology} />
+    <Globe.Root zoom={1.2} rotation={[Math.random() * 360, 0, 0]}>
+      <Globe.Canvas ref={setController} topology={topology} styles={defaultStyles} />
       <Globe.Zoom onAction={handleAction} />
     </Globe.Root>
   );
@@ -249,8 +257,8 @@ export const Earth2 = () => {
 
   return (
     <div className='absolute bottom-0 left-0 right-0 '>
-      <Globe.Root classNames='h-[400px]' scale={2.8} translation={{ x: 0, y: 400 }}>
-        <Globe.Canvas ref={setController} topology={topology} />
+      <Globe.Root classNames='h-[400px]' zoom={2.8} translation={{ x: 0, y: 400 }}>
+        <Globe.Canvas ref={setController} topology={topology} styles={defaultStyles} />
         <Globe.Zoom onAction={handleAction} />
       </Globe.Root>
     </div>
@@ -283,33 +291,73 @@ export const Mercator = () => {
   useDrag(controller);
 
   return (
-    <Globe.Root classNames='flex grow overflow-hidden' scale={0.7} rotation={initialRotation}>
+    <Globe.Root classNames='flex grow overflow-hidden' zoom={0.7} rotation={initialRotation}>
       <Globe.Canvas ref={setController} topology={topology} projection='mercator' styles={monochrome} />
       <Globe.Zoom onAction={handleAction} />
     </Globe.Root>
   );
 };
 
-export const Globe1 = () => {
-  return <Story drag projection='mercator' scale={0.8} rotation={initialRotation} />;
+type Story = StoryObj<typeof DefaultStory>;
+
+export const Globe1: Story = {
+  args: {
+    drag: true,
+    projection: 'mercator',
+    zoom: 0.8,
+    rotation: initialRotation,
+    styles: defaultStyles,
+  },
 };
 
-export const Globe2 = () => {
-  return <Story drag projection='transverse-mercator' scale={0.8} rotation={initialRotation} styles={defaultStyles} />;
+export const Globe2: Story = {
+  args: {
+    drag: true,
+    projection: 'transverse-mercator',
+    zoom: 0.8,
+    rotation: initialRotation,
+    styles: defaultStyles,
+  },
 };
 
-export const Globe3 = () => {
-  return <Story drag spin scale={1.5} rotation={initialRotation} styles={defaultStyles} />;
+export const Globe3: Story = {
+  args: {
+    drag: true,
+    spin: true,
+    zoom: 1.5,
+    rotation: initialRotation,
+    styles: defaultStyles,
+  },
 };
 
-export const Globe4 = () => {
-  return <Story drag tour scale={2} rotation={initialRotation} styles={defaultStyles} />;
+export const Globe4: Story = {
+  args: {
+    drag: true,
+    tour: true,
+    zoom: 2,
+    rotation: initialRotation,
+    styles: defaultStyles,
+  },
 };
 
-export const Globe5 = () => {
-  return <Story drag tour scale={0.9} rotation={initialRotation} styles={dotStyles} />;
+export const Globe5: Story = {
+  args: {
+    drag: true,
+    tour: true,
+    zoom: 0.9,
+    rotation: initialRotation,
+    styles: dotStyles,
+  },
 };
 
-export const Globe6 = () => {
-  return <Story drag xAxis tour scale={2} translation={{ x: 0, y: 600 }} rotation={[0, -20, 0]} styles={dotStyles} />;
+export const Globe6: Story = {
+  args: {
+    drag: true,
+    xAxis: true,
+    tour: true,
+    zoom: 2,
+    translation: { x: 0, y: 600 },
+    rotation: [0, -20, 0],
+    styles: dotStyles,
+  },
 };

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,8 +26,8 @@ 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 { type ThemeMode, type ThemedClassName, useDynamicRef, useThemeContext } from '@dxos/react-ui';
+import { mx } from '@dxos/ui-theme';
 
 import {
   GlobeContextProvider,
@@ -44,7 +44,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 +103,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';
 
@@ -130,6 +130,7 @@ type GlobeRootProps = PropsWithChildren<ThemedClassName<GlobeContextProviderProp
 
 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}>
@@ -154,17 +155,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 +175,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 scaleRef = useDynamicRef(scale);
+    const zoomRef = useDynamicRef(zoom);
 
     // Update rotation.
     useEffect(() => {
       if (center) {
-        setScale(1);
+        setZoom(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 +233,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 +250,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 is-96 p-2 overflow-hidden border border-green-700 rounded',
         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 +282,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,
 };