@dxos/react-ui-geo 0.8.1 → 0.8.2-main.2f9c567

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-geo",
-  "version": "0.8.1",
+  "version": "0.8.2-main.2f9c567",
   "description": "Geo components.",
   "homepage": "https://github.com/dxos",
   "bugs": "https://github.com/dxos/issues",
@@ -45,11 +45,11 @@
     "topojson-client": "^3.1.0",
     "topojson-simplify": "^3.0.3",
     "versor": "^0.2.0",
-    "@dxos/async": "0.8.1",
-    "@dxos/debug": "0.8.1",
-    "@dxos/node-std": "0.8.1",
-    "@dxos/log": "0.8.1",
-    "@dxos/util": "0.8.1"
+    "@dxos/async": "0.8.2-main.2f9c567",
+    "@dxos/debug": "0.8.2-main.2f9c567",
+    "@dxos/log": "0.8.2-main.2f9c567",
+    "@dxos/util": "0.8.2-main.2f9c567",
+    "@dxos/node-std": "0.8.2-main.2f9c567"
   },
   "devDependencies": {
     "@react-three/drei": "^9.99.0",
@@ -69,15 +69,15 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "three": "0.165.0",
-    "@dxos/react-ui": "0.8.1",
-    "@dxos/storybook-utils": "0.8.1",
-    "@dxos/react-ui-theme": "0.8.1"
+    "@dxos/react-ui": "0.8.2-main.2f9c567",
+    "@dxos/react-ui-theme": "0.8.2-main.2f9c567",
+    "@dxos/storybook-utils": "0.8.2-main.2f9c567"
   },
   "peerDependencies": {
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui-theme": "0.8.1",
-    "@dxos/react-ui": "0.8.1"
+    "@dxos/react-ui": "0.8.2-main.2f9c567",
+    "@dxos/react-ui-theme": "0.8.2-main.2f9c567"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Globe/Globe.tsx

@@ -2,8 +2,17 @@
 // Copyright 2018 DXOS.org
 //
 
-import * as d3 from 'd3';
-import { type GeoProjection } from 'd3';
+import {
+  type GeoProjection,
+  geoMercator,
+  geoOrthographic,
+  geoPath,
+  geoTransverseMercator,
+  interpolateNumber,
+  transition,
+  easeLinear,
+  easeSinOut,
+} from 'd3';
 import { type ControlPosition } from 'leaflet';
 import React, {
   type PropsWithChildren,
@@ -99,18 +108,18 @@ export type GlobeController = {
 export type ProjectionType = 'orthographic' | 'mercator' | 'transverse-mercator';
 
 const projectionMap: Record<ProjectionType, () => GeoProjection> = {
-  orthographic: d3.geoOrthographic,
-  mercator: d3.geoMercator,
-  'transverse-mercator': d3.geoTransverseMercator,
+  orthographic: geoOrthographic,
+  mercator: geoMercator,
+  'transverse-mercator': geoTransverseMercator,
 };
 
 const getProjection = (type: GlobeCanvasProps['projection'] = 'orthographic'): GeoProjection => {
   if (typeof type === 'string') {
-    const constructor = projectionMap[type] ?? d3.geoOrthographic;
+    const constructor = projectionMap[type] ?? geoOrthographic;
     return constructor();
   }
 
-  return type ?? d3.geoOrthographic();
+  return type ?? geoOrthographic();
 };
 
 //
@@ -194,10 +203,10 @@ const GlobeCanvas = forwardRef<GlobeController, GlobeCanvasProps>(
           setCenter,
           setScale: (s) => {
             if (typeof s === 'function') {
-              const is = d3.interpolateNumber(scaleRef.current, s(scaleRef.current));
+              const is = interpolateNumber(scaleRef.current, s(scaleRef.current));
               // Stop easing if already zooming.
-              d3.transition()
-                .ease(zooming.current ? d3.easeLinear : d3.easeSinOut)
+              transition()
+                .ease(zooming.current ? easeLinear : easeSinOut)
                 .duration(200)
                 .tween('scale', () => (t) => setScale(is(t)))
                 .on('end', () => {
@@ -217,7 +226,7 @@ const GlobeCanvas = forwardRef<GlobeController, GlobeCanvasProps>(
     // https://d3js.org/d3-geo/path#geoPath
     // https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext
     const generator = useMemo(
-      () => canvas && projection && d3.geoPath(projection, canvas.getContext('2d', { alpha: false })),
+      () => canvas && projection && geoPath(projection, canvas.getContext('2d', { alpha: false })),
       [canvas, projection],
     );
 

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

@@ -13,7 +13,7 @@ import { Map, type MapController } from './Map';
 import { useMapZoomHandler } from '../../hooks';
 import { type MapMarker } from '../../types';
 
-const Render = ({ markers }) => {
+const DefaultStory = ({ markers = [] }: { markers?: MapMarker[] }) => {
   const [controller, setController] = useState<MapController>();
   const handleZoomAction = useMapZoomHandler(controller);
 
@@ -26,15 +26,15 @@ const Render = ({ markers }) => {
   );
 };
 
-const meta: Meta<typeof Render> = {
+const meta: Meta<typeof DefaultStory> = {
   title: 'ui/react-ui-geo/Map',
-  component: Render,
+  render: DefaultStory,
   decorators: [withTheme, withLayout({ fullscreen: true, tooltips: true })],
 };
 
 export default meta;
 
-type Story = StoryObj<typeof Render>;
+type Story = StoryObj<typeof DefaultStory>;
 
 export const Default: Story = {};
 

package/src/hooks/useDrag.ts

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import * as d3 from 'd3';
+import { select } from 'd3';
 import { useEffect } from 'react';
 
 import { type GlobeController } from '../components';
@@ -31,7 +31,7 @@ export const useDrag = (controller?: GlobeController | null, options: DragOption
     }
 
     geoInertiaDrag(
-      d3.select(canvas),
+      select(canvas),
       () => {
         controller.setRotation(controller.projection.rotate());
         options.onUpdate?.({ type: 'move', controller });
@@ -47,7 +47,7 @@ export const useDrag = (controller?: GlobeController | null, options: DragOption
 
     // TODO(burdon): Cancel drag timer.
     return () => {
-      cancelDrag(d3.select(canvas));
+      cancelDrag(select(canvas));
     };
   }, [controller, JSON.stringify(options)]);
 };

package/src/hooks/useSpinner.ts

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import * as d3 from 'd3';
+import { timer as d3Timer } from 'd3';
 import { type Timer } from 'd3';
 import { useEffect, useState } from 'react';
 
@@ -27,7 +27,7 @@ export const useSpinner = (controller?: GlobeController | null, options: Spinner
 
       let t = 0;
       let lastRotation = controller.projection.rotate();
-      timer = d3.timer((elapsed) => {
+      timer = d3Timer((elapsed) => {
         const dt = elapsed - t;
         t = elapsed;
 

package/src/hooks/useTour.ts

@@ -2,12 +2,10 @@
 // Copyright 2024 DXOS.org
 //
 
-import * as d3 from 'd3';
-import { type Dispatch, type SetStateAction, useEffect, useState } from 'react';
+import { geoPath, geoInterpolate, geoDistance, selection as d3Selection } from 'd3';
+import { type SetStateAction, type Dispatch, useEffect, useState, useMemo } from 'react';
 import versor from 'versor';
 
-import { log } from '@dxos/log';
-
 import type { GlobeController } from '../components';
 import { geoToPosition, type LatLng, positionToRotation, type StyleSet } from '../util';
 
@@ -34,7 +32,7 @@ export const useTour = (
   points?: LatLng[],
   options: TourOptions = {},
 ): [boolean, Dispatch<SetStateAction<boolean>>] => {
-  const selection = d3.selection();
+  const selection = useMemo(() => d3Selection(), []);
   const [running, setRunning] = useState(options.running ?? false);
   useEffect(() => {
     if (!running) {
@@ -47,7 +45,7 @@ export const useTour = (
       t = setTimeout(async () => {
         const { canvas, projection, setRotation } = controller;
         const context = canvas.getContext('2d', { alpha: false });
-        const path = d3.geoPath(projection, context).pointRadius(2);
+        const path = geoPath(projection, context).pointRadius(2);
 
         const tilt = options.tilt ?? 0;
         let last: LatLng;
@@ -65,8 +63,8 @@ export const useTour = (
             // Points.
             const p1 = last ? geoToPosition(last) : undefined;
             const p2 = geoToPosition(next);
-            const ip = d3.geoInterpolate(p1 || p2, p2);
-            const distance = d3.geoDistance(p1 || p2, p2);
+            const ip = geoInterpolate(p1 || p2, p2);
+            const distance = geoDistance(p1 || p2, p2);
 
             // Rotation.
             const r1 = p1 ? positionToRotation(p1, tilt) : controller.projection.rotate();
@@ -98,10 +96,8 @@ export const useTour = (
                 context.restore();
 
                 // TODO(burdon): This has to come after rendering above. Add to features to correct order?
-                if (options.autoRotate) {
-                  projection.rotate(iv(t));
-                  setRotation(projection.rotate());
-                }
+                projection.rotate(iv(t));
+                setRotation(projection.rotate());
               });
 
             // Throws if interrupted.
@@ -109,7 +105,7 @@ export const useTour = (
             last = next;
           }
         } catch (err) {
-          log.catch(err);
+          // Ignore.
         } finally {
           setRunning(false);
         }

package/src/util/inertia.ts

@@ -4,7 +4,7 @@
 // https://github.com/Fil/d3-inertia
 //
 
-import * as d3 from 'd3';
+import { select, drag, timer } from 'd3';
 import versor from 'versor';
 
 export const restrictAxis =
@@ -26,7 +26,7 @@ export const geoInertiaDrag = (target, render, projection, options) => {
   if (target.node) {
     target = target.node();
   }
-  target = d3.select(target);
+  target = select(target);
 
   // Complete params: (projection, render, startDrag, dragging, endDrag).
   const inertia = geoInertiaDragHelper({
@@ -45,7 +45,7 @@ export const geoInertiaDrag = (target, render, projection, options) => {
     hold: options.hold,
   });
 
-  target.call(d3.drag().on('start', inertia.start).on('drag', inertia.move).on('end', inertia.end));
+  target.call(drag().on('start', inertia.start).on('drag', inertia.move).on('end', inertia.end));
   return inertia;
 };
 
@@ -119,7 +119,7 @@ function inertiaHelper(opt) {
   const inertia = {
     position: [0, 0],
     velocity: [0, 0], // Velocity in pixels/s.
-    timer: d3.timer(() => {}),
+    timer: timer(() => {}),
     time: 0,
     t: 0,
 
@@ -135,7 +135,6 @@ function inertiaHelper(opt) {
 
     move: function (ev) {
       const position = [ev.x, ev.y];
-
       const time = performance.now();
       const deltaTime = time - inertia.time;
       const decay = 1 - Math.exp(-deltaTime / 1_000);

package/src/util/path.ts

@@ -2,16 +2,13 @@
 // Copyright 2020 DXOS.org
 //
 
-import * as d3 from 'd3';
-import { type GeoGeometryObjects } from 'd3';
+import { type GeoGeometryObjects, geoCircle as d3GeoCircle } from 'd3';
 import { type Point, type Polygon, type Position } from 'geojson';
 
 import type { Vector } from '../hooks';
 
 export type LatLng = { lat: number; lng: number };
 
-// TODO(burdon): Clean-up.
-
 export const positionToRotation = ([lng, lat]: [number, number], tilt = 0): Vector => [-lng, tilt - lat, 0];
 
 export const geoToPosition = ({ lat, lng }: LatLng): [number, number] => [lng, lat];
@@ -20,7 +17,7 @@ export const geoPoint = (point: LatLng): Point => ({ type: 'Point', coordinates:
 
 // https://github.com/d3/d3-geo#geoCircle
 export const geoCircle = ({ lat, lng }: LatLng, radius: number): Polygon =>
-  d3.geoCircle().radius(radius).center([lng, lat])();
+  d3GeoCircle().radius(radius).center([lng, lat])();
 
 export const geoLine = (p1: LatLng, p2: LatLng): GeoGeometryObjects => ({
   type: 'LineString',

package/src/util/render.ts

@@ -2,9 +2,8 @@
 // Copyright 2020 DXOS.org
 //
 
-import * as d3 from 'd3';
-import { type GeoPath, type GeoPermissibleObjects } from 'd3';
-import * as topojson from 'topojson-client';
+import { type GeoPath, type GeoPermissibleObjects, geoGraticule } from 'd3';
+import { feature, mesh } from 'topojson-client';
 import { type Topology } from 'topojson-specification';
 
 import { type LatLng, geoLine, geoPoint } from './path';
@@ -53,7 +52,7 @@ export const createLayers = (topology: Topology, features: Features, styles: Sty
   if (styles.graticule) {
     layers.push({
       styles: styles.graticule,
-      path: d3.geoGraticule().step([6, 6])(),
+      path: geoGraticule().step([6, 6])(),
     });
   }
 
@@ -65,14 +64,14 @@ export const createLayers = (topology: Topology, features: Features, styles: Sty
     if (topology.objects.land && styles.land) {
       layers.push({
         styles: styles.land,
-        path: topojson.feature(topology, topology.objects.land),
+        path: feature(topology, topology.objects.land),
       });
     }
 
     if (topology.objects.countries && styles.border) {
       layers.push({
         styles: styles.border,
-        path: topojson.mesh(topology, topology.objects.countries, (a: any, b: any) => a !== b),
+        path: mesh(topology, topology.objects.countries, (a: any, b: any) => a !== b),
       });
     }