@dxos/react-ui-geo 0.8.2-main.fbd8ed0 → 0.8.2-staging.7ac8446

package/dist/types/src/util/path.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"path.d.ts","sourceRoot":"","sources":["../../../../src/util/path.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,kBAAkB,EAA4B,MAAM,IAAI,CAAC;AACvE,OAAO,EAAE,KAAK,KAAK,EAAE,KAAK,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,SAAS,CAAC;AAElE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAEvC,MAAM,MAAM,MAAM,GAAG;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,CAAC;AAElD,eAAO,MAAM,kBAAkB,GAAI,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,aAAQ,KAAG,MAA+B,CAAC;AAE5G,eAAO,MAAM,aAAa,GAAI,cAAc,MAAM,KAAG,CAAC,MAAM,EAAE,MAAM,CAAe,CAAC;AAEpF,eAAO,MAAM,QAAQ,GAAI,OAAO,MAAM,KAAG,KAA+D,CAAC;AAGzG,eAAO,MAAM,SAAS,GAAI,cAAc,MAAM,EAAE,QAAQ,MAAM,KAAG,OACd,CAAC;AAEpD,eAAO,MAAM,OAAO,GAAI,IAAI,MAAM,EAAE,IAAI,MAAM,KAAG,kBAM/C,CAAC;AAEH,eAAO,MAAM,YAAY,GAAI,QAAQ,QAAQ,EAAE,EAAE,QAAQ,QAAQ,KAAG,QAAQ,GAAG,IAiB9E,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,QAAQ,QAAQ,EAAE,QAAQ,QAAQ,KAAG,MAIhE,CAAC"}
+{"version":3,"file":"path.d.ts","sourceRoot":"","sources":["../../../../src/util/path.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,kBAAkB,EAAE,MAAM,IAAI,CAAC;AAC7C,OAAO,EAAE,KAAK,KAAK,EAAE,KAAK,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,SAAS,CAAC;AAElE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAEvC,MAAM,MAAM,MAAM,GAAG;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,CAAC;AAIlD,eAAO,MAAM,kBAAkB,eAAgB,CAAC,MAAM,EAAE,MAAM,CAAC,oBAAa,MAA+B,CAAC;AAE5G,eAAO,MAAM,aAAa,iBAAkB,MAAM,KAAG,CAAC,MAAM,EAAE,MAAM,CAAe,CAAC;AAEpF,eAAO,MAAM,QAAQ,UAAW,MAAM,KAAG,KAA+D,CAAC;AAGzG,eAAO,MAAM,SAAS,iBAAkB,MAAM,UAAU,MAAM,KAAG,OACb,CAAC;AAErD,eAAO,MAAM,OAAO,OAAQ,MAAM,MAAM,MAAM,KAAG,kBAM/C,CAAC;AAEH,eAAO,MAAM,YAAY,WAAY,QAAQ,EAAE,UAAU,QAAQ,KAAG,QAAQ,GAAG,IAiB9E,CAAC;AAEF,eAAO,MAAM,WAAW,WAAY,QAAQ,UAAU,QAAQ,KAAG,MAIhE,CAAC"}

package/dist/types/src/util/render.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../../../../src/util/render.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,OAAO,EAAE,KAAK,qBAAqB,EAAgB,MAAM,IAAI,CAAC;AAE5E,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAEvD,OAAO,EAAE,KAAK,MAAM,EAAqB,MAAM,QAAQ,CAAC;AAExD,MAAM,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AAEzC,MAAM,MAAM,KAAK,GACb,YAAY,GACZ,OAAO,GACP,WAAW,GACX,MAAM,GACN,QAAQ,GACR,MAAM,GACN,OAAO,GACP,MAAM,GACN,QAAQ,GACR,KAAK,CAAC;AAEV,MAAM,MAAM,QAAQ,GAAG,OAAO,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC;AAEtD,MAAM,MAAM,QAAQ,GAAG;IACrB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,KAAK,CAAC,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CAC9C,CAAC;AAEF,MAAM,MAAM,KAAK,GAAG;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,qBAAqB,CAAC;CAC7B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,GAAI,UAAU,QAAQ,EAAE,UAAU,QAAQ,EAAE,QAAQ,QAAQ,KAAG,KAAK,EA2E5F,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,GAAI,WAAW,OAAO,EAAE,QAAQ,KAAK,EAAO,EAAE,OAAO,MAAM,EAAE,QAAQ,QAAQ,6BA0CrG,CAAC"}
+{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../../../../src/util/render.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,OAAO,EAAE,KAAK,qBAAqB,EAAE,MAAM,IAAI,CAAC;AAE9D,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAEvD,OAAO,EAAE,KAAK,MAAM,EAAqB,MAAM,QAAQ,CAAC;AAExD,MAAM,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AAEzC,MAAM,MAAM,KAAK,GACb,YAAY,GACZ,OAAO,GACP,WAAW,GACX,MAAM,GACN,QAAQ,GACR,MAAM,GACN,OAAO,GACP,MAAM,GACN,QAAQ,GACR,KAAK,CAAC;AAEV,MAAM,MAAM,QAAQ,GAAG,OAAO,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC;AAEtD,MAAM,MAAM,QAAQ,GAAG;IACrB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,KAAK,CAAC,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CAC9C,CAAC;AAEF,MAAM,MAAM,KAAK,GAAG;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,qBAAqB,CAAC;CAC7B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,aAAc,QAAQ,YAAY,QAAQ,UAAU,QAAQ,KAAG,KAAK,EA2E5F,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,cAAe,OAAO,UAAU,KAAK,EAAE,SAAc,MAAM,UAAU,QAAQ,6BA0CrG,CAAC"}

package/dist/types/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"version":"5.8.3"}
+{"version":"5.7.3"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-geo",
-  "version": "0.8.2-main.fbd8ed0",
+  "version": "0.8.2-staging.7ac8446",
   "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.2-main.fbd8ed0",
-    "@dxos/debug": "0.8.2-main.fbd8ed0",
-    "@dxos/node-std": "0.8.2-main.fbd8ed0",
-    "@dxos/util": "0.8.2-main.fbd8ed0",
-    "@dxos/log": "0.8.2-main.fbd8ed0"
+    "@dxos/async": "0.8.2-staging.7ac8446",
+    "@dxos/log": "0.8.2-staging.7ac8446",
+    "@dxos/node-std": "0.8.2-staging.7ac8446",
+    "@dxos/util": "0.8.2-staging.7ac8446",
+    "@dxos/debug": "0.8.2-staging.7ac8446"
   },
   "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.2-main.fbd8ed0",
-    "@dxos/react-ui-theme": "0.8.2-main.fbd8ed0",
-    "@dxos/storybook-utils": "0.8.2-main.fbd8ed0"
+    "@dxos/react-ui": "0.8.2-staging.7ac8446",
+    "@dxos/react-ui-theme": "0.8.2-staging.7ac8446",
+    "@dxos/storybook-utils": "0.8.2-staging.7ac8446"
   },
   "peerDependencies": {
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.2-main.fbd8ed0",
-    "@dxos/react-ui-theme": "0.8.2-main.fbd8ed0"
+    "@dxos/react-ui": "0.8.2-staging.7ac8446",
+    "@dxos/react-ui-theme": "0.8.2-staging.7ac8446"
   },
   "publishConfig": {
     "access": "public"

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

@@ -222,7 +222,7 @@ const initialRotation: Vector = [0, -40, 0];
 const meta: Meta = {
   title: 'ui/react-ui-geo/Globe',
   component: Globe.Root,
-  decorators: [withTheme, withLayout({ fullscreen: true, classNames: 'bg-[#000]' })],
+  decorators: [withTheme, withLayout({ fullscreen: true, classNames: 'bg-[#000]', tooltips: true })],
 };
 
 export default meta;

package/src/components/Globe/Globe.tsx

@@ -2,17 +2,8 @@
 // Copyright 2018 DXOS.org
 //
 
-import {
-  type GeoProjection,
-  geoMercator,
-  geoOrthographic,
-  geoPath,
-  geoTransverseMercator,
-  interpolateNumber,
-  transition,
-  easeLinear,
-  easeSinOut,
-} from 'd3';
+import * as d3 from 'd3';
+import { type GeoProjection } from 'd3';
 import { type ControlPosition } from 'leaflet';
 import React, {
   type PropsWithChildren,
@@ -108,18 +99,18 @@ export type GlobeController = {
 export type ProjectionType = 'orthographic' | 'mercator' | 'transverse-mercator';
 
 const projectionMap: Record<ProjectionType, () => GeoProjection> = {
-  orthographic: geoOrthographic,
-  mercator: geoMercator,
-  'transverse-mercator': geoTransverseMercator,
+  orthographic: d3.geoOrthographic,
+  mercator: d3.geoMercator,
+  'transverse-mercator': d3.geoTransverseMercator,
 };
 
 const getProjection = (type: GlobeCanvasProps['projection'] = 'orthographic'): GeoProjection => {
   if (typeof type === 'string') {
-    const constructor = projectionMap[type] ?? geoOrthographic;
+    const constructor = projectionMap[type] ?? d3.geoOrthographic;
     return constructor();
   }
 
-  return type ?? geoOrthographic();
+  return type ?? d3.geoOrthographic();
 };
 
 //
@@ -203,10 +194,10 @@ const GlobeCanvas = forwardRef<GlobeController, GlobeCanvasProps>(
           setCenter,
           setScale: (s) => {
             if (typeof s === 'function') {
-              const is = interpolateNumber(scaleRef.current, s(scaleRef.current));
+              const is = d3.interpolateNumber(scaleRef.current, s(scaleRef.current));
               // Stop easing if already zooming.
-              transition()
-                .ease(zooming.current ? easeLinear : easeSinOut)
+              d3.transition()
+                .ease(zooming.current ? d3.easeLinear : d3.easeSinOut)
                 .duration(200)
                 .tween('scale', () => (t) => setScale(is(t)))
                 .on('end', () => {
@@ -226,7 +217,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 && geoPath(projection, canvas.getContext('2d', { alpha: false })),
+      () => canvas && projection && d3.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 DefaultStory = ({ markers = [] }: { markers?: MapMarker[] }) => {
+const Render = ({ markers }) => {
   const [controller, setController] = useState<MapController>();
   const handleZoomAction = useMapZoomHandler(controller);
 
@@ -26,15 +26,15 @@ const DefaultStory = ({ markers = [] }: { markers?: MapMarker[] }) => {
   );
 };
 
-const meta: Meta<typeof DefaultStory> = {
+const meta: Meta<typeof Render> = {
   title: 'ui/react-ui-geo/Map',
-  render: DefaultStory,
-  decorators: [withTheme, withLayout({ fullscreen: true })],
+  component: Render,
+  decorators: [withTheme, withLayout({ fullscreen: true, tooltips: true })],
 };
 
 export default meta;
 
-type Story = StoryObj<typeof DefaultStory>;
+type Story = StoryObj<typeof Render>;
 
 export const Default: Story = {};
 

package/src/hooks/useDrag.ts

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { select } from 'd3';
+import * as d3 from 'd3';
 import { useEffect } from 'react';
 
 import { type GlobeController } from '../components';
@@ -31,7 +31,7 @@ export const useDrag = (controller?: GlobeController | null, options: DragOption
     }
 
     geoInertiaDrag(
-      select(canvas),
+      d3.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(select(canvas));
+      cancelDrag(d3.select(canvas));
     };
   }, [controller, JSON.stringify(options)]);
 };

package/src/hooks/useSpinner.ts

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { timer as d3Timer } from 'd3';
+import * as d3 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 = d3Timer((elapsed) => {
+      timer = d3.timer((elapsed) => {
         const dt = elapsed - t;
         t = elapsed;
 

package/src/hooks/useTour.ts

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

package/src/util/inertia.ts

@@ -4,7 +4,7 @@
 // https://github.com/Fil/d3-inertia
 //
 
-import { select, drag, timer } from 'd3';
+import * as d3 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 = select(target);
+  target = d3.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(drag().on('start', inertia.start).on('drag', inertia.move).on('end', inertia.end));
+  target.call(d3.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: timer(() => {}),
+    timer: d3.timer(() => {}),
     time: 0,
     t: 0,
 
@@ -135,6 +135,7 @@ 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,13 +2,16 @@
 // Copyright 2020 DXOS.org
 //
 
-import { type GeoGeometryObjects, geoCircle as d3GeoCircle } from 'd3';
+import * as d3 from 'd3';
+import { type GeoGeometryObjects } 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];
@@ -17,7 +20,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 =>
-  d3GeoCircle().radius(radius).center([lng, lat])();
+  d3.geoCircle().radius(radius).center([lng, lat])();
 
 export const geoLine = (p1: LatLng, p2: LatLng): GeoGeometryObjects => ({
   type: 'LineString',

package/src/util/render.ts

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