@dxos/react-ui-geo 0.7.5-labs.ff2ff30 → 0.7.5-main.b19bfc8

package/src/hooks/useTour.ts

@@ -3,29 +3,39 @@
 //
 
 import * as d3 from 'd3';
-import { useEffect, useState } from 'react';
+import { type Dispatch, type SetStateAction, useEffect, useState } from 'react';
 import versor from 'versor';
 
+import { log } from '@dxos/log';
+
 import type { GlobeController } from '../components';
-import { type Features, geoToPosition, type LatLng, positionToRotation, type StyleSet } from '../util';
+import { geoToPosition, type LatLng, positionToRotation, type StyleSet } from '../util';
 
 const TRANSITION_NAME = 'globe-tour';
 
 const defaultDuration = 1_500;
 
 export type TourOptions = {
+  running?: boolean;
   disabled?: boolean;
-  styles?: StyleSet;
   duration?: number;
+  loop?: boolean;
+  tilt?: number;
+  autoRotate?: boolean;
+  styles?: StyleSet;
 };
 
 /**
  * Iterates between points.
  * Inspired by: https://observablehq.com/@mbostock/top-100-cities
  */
-export const useTour = (controller?: GlobeController | null, features?: Features, options: TourOptions = {}) => {
+export const useTour = (
+  controller?: GlobeController | null,
+  points?: LatLng[],
+  options: TourOptions = {},
+): [boolean, Dispatch<SetStateAction<boolean>>] => {
   const selection = d3.selection();
-  const [running, setRunning] = useState(false);
+  const [running, setRunning] = useState(options.running ?? false);
   useEffect(() => {
     if (!running) {
       selection.interrupt(TRANSITION_NAME);
@@ -39,10 +49,15 @@ export const useTour = (controller?: GlobeController | null, features?: Features
         const context = canvas.getContext('2d', { alpha: false });
         const path = d3.geoPath(projection, context).pointRadius(2);
 
-        const tilt = 0;
+        const tilt = options.tilt ?? 0;
         let last: LatLng;
         try {
-          for (const next of features.points) {
+          const p = [...points];
+          if (options.loop) {
+            p.push(p[0]);
+          }
+
+          for (const next of p) {
             if (!running) {
               break;
             }
@@ -83,8 +98,10 @@ export const useTour = (controller?: GlobeController | null, features?: Features
                 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.
@@ -92,6 +109,8 @@ export const useTour = (controller?: GlobeController | null, features?: Features
             last = next;
           }
         } catch (err) {
+          log.catch(err);
+        } finally {
           setRunning(false);
         }
       });
@@ -101,14 +120,7 @@ export const useTour = (controller?: GlobeController | null, features?: Features
         selection.interrupt(TRANSITION_NAME);
       };
     }
-  }, [controller, running]);
-
-  return [
-    () => {
-      if (!options.disabled) {
-        setRunning(true);
-      }
-    },
-    () => setRunning(false),
-  ];
+  }, [controller, running, JSON.stringify(options)]);
+
+  return [running, setRunning];
 };

package/src/util/debug.ts

@@ -12,5 +12,6 @@ export const timer = <T = void>(cb: () => T): T => {
     // eslint-disable-next-line no-console
     console.log({ t, data });
   }
+
   return data;
 };

package/src/util/render.ts

@@ -11,7 +11,17 @@ import { type LatLng, geoLine, geoPoint } from './path';
 
 export type Styles = Record<string, any>;
 
-export type Style = 'water' | 'graticule' | 'land' | 'border' | 'dots' | 'point' | 'line' | 'cursor' | 'arc';
+export type Style =
+  | 'background'
+  | 'water'
+  | 'graticule'
+  | 'land'
+  | 'border'
+  | 'dots'
+  | 'point'
+  | 'line'
+  | 'cursor'
+  | 'arc';
 
 export type StyleSet = Partial<Record<Style, Styles>>;
 
@@ -108,16 +118,20 @@ export const createLayers = (topology: Topology, features: Features, styles: Sty
 /**
  * Render layers created above.
  */
-export const renderLayers = (generator: GeoPath, layers: Layer[] = [], scale: number) => {
+export const renderLayers = (generator: GeoPath, layers: Layer[] = [], scale: number, styles: StyleSet) => {
   const context: CanvasRenderingContext2D = generator.context();
   const {
     canvas: { width, height },
   } = context;
   context.reset();
 
-  // TODO(burdon): Option.
   // Clear background.
-  context.clearRect(0, 0, width, height);
+  if (styles.background) {
+    context.fillStyle = styles.background.fillStyle;
+    context.fillRect(0, 0, width, height);
+  } else {
+    context.clearRect(0, 0, width, height);
+  }
 
   // Render features.
   // https://github.com/d3/d3-geo#_path