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

package/src/hooks/useTour.ts

@@ -2,12 +2,13 @@
 // Copyright 2024 DXOS.org
 //
 
-import { geoPath, geoInterpolate, geoDistance, selection as d3Selection } from 'd3';
-import { type SetStateAction, type Dispatch, useEffect, useState, useMemo } from 'react';
+import { selection as d3Selection, geoDistance, geoInterpolate, geoPath } from 'd3';
+import { type Dispatch, type SetStateAction, useEffect, useMemo, useState } from 'react';
 import versor from 'versor';
 
 import type { GlobeController } from '../components';
-import { geoToPosition, type LatLng, positionToRotation, type StyleSet } from '../util';
+import { type LatLngLiteral } from '../types';
+import { type StyleSet, geoToPosition, positionToRotation } from '../util';
 
 const TRANSITION_NAME = 'globe-tour';
 
@@ -29,10 +30,11 @@ export type TourOptions = {
  */
 export const useTour = (
   controller?: GlobeController | null,
-  points?: LatLng[],
+  points?: LatLngLiteral[],
   options: TourOptions = {},
 ): [boolean, Dispatch<SetStateAction<boolean>>] => {
   const selection = useMemo(() => d3Selection(), []);
+  // TODO(burdon): Redo controlled state.
   const [running, setRunning] = useState(options.running ?? false);
   useEffect(() => {
     if (!running) {
@@ -48,7 +50,7 @@ export const useTour = (
         const path = geoPath(projection, context).pointRadius(2);
 
         const tilt = options.tilt ?? 0;
-        let last: LatLng;
+        let last: LatLngLiteral;
         try {
           const p = [...points];
           if (options.loop) {
@@ -82,14 +84,14 @@ export const useTour = (
                 {
                   context.beginPath();
                   context.strokeStyle = options?.styles?.arc?.strokeStyle ?? 'yellow';
-                  context.lineWidth = (options?.styles?.arc?.lineWidth ?? 1.5) * (controller?.scale ?? 1);
+                  context.lineWidth = (options?.styles?.arc?.lineWidth ?? 1.5) * (controller?.zoom ?? 1);
                   context.setLineDash(options?.styles?.arc?.lineDash ?? []);
                   path({ type: 'LineString', coordinates: [ip(t1), ip(t2)] });
                   context.stroke();
 
                   context.beginPath();
                   context.fillStyle = options?.styles?.cursor?.fillStyle ?? 'orange';
-                  path.pointRadius((options?.styles?.cursor?.pointRadius ?? 2) * (controller?.scale ?? 1));
+                  path.pointRadius((options?.styles?.cursor?.pointRadius ?? 2) * (controller?.zoom ?? 1));
                   path({ type: 'Point', coordinates: ip(t2) });
                   context.fill();
                 }
@@ -104,7 +106,7 @@ export const useTour = (
             await transition.end();
             last = next;
           }
-        } catch (err) {
+        } catch {
           // Ignore.
         } finally {
           setRunning(false);

package/src/index.ts

@@ -5,5 +5,6 @@
 export * from './components';
 export * from './data';
 export * from './hooks';
-export * from './types';
+export * from './translations';
+export type * from './types';
 export * from './util';

package/src/translations.ts

@@ -0,0 +1,20 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Resource } from '@dxos/react-ui';
+
+export const translationKey = '@dxos/react-ui-geo';
+
+export const translations = [
+  {
+    'en-US': {
+      [translationKey]: {
+        'zoom in icon button': 'Zoom in',
+        'zoom out icon button': 'Zoom out',
+        'start icon button': 'Start',
+        'toggle icon button': 'Toggle',
+      },
+    },
+  },
+] as const satisfies Resource[];

package/src/types.ts

@@ -4,7 +4,9 @@
 
 import { type LatLngLiteral } from 'leaflet';
 
-export type MapMarker = {
+export { type LatLngLiteral };
+
+export type GeoMarker = {
   id: string;
   title?: string;
   location: LatLngLiteral;

package/src/util/inertia.ts

@@ -4,7 +4,7 @@
 // https://github.com/Fil/d3-inertia
 //
 
-import { select, drag, timer } from 'd3';
+import { drag, select, timer } from 'd3';
 import versor from 'versor';
 
 export const restrictAxis =

package/src/util/path.ts

@@ -4,22 +4,21 @@
 
 import { type GeoGeometryObjects, geoCircle as d3GeoCircle } from 'd3';
 import { type Point, type Polygon, type Position } from 'geojson';
+import { type LatLngLiteral } from 'leaflet';
 
 import type { Vector } from '../hooks';
 
-export type LatLng = { lat: number; lng: number };
-
 export const positionToRotation = ([lng, lat]: [number, number], tilt = 0): Vector => [-lng, tilt - lat, 0];
 
-export const geoToPosition = ({ lat, lng }: LatLng): [number, number] => [lng, lat];
+export const geoToPosition = ({ lat, lng }: LatLngLiteral): [number, number] => [lng, lat];
 
-export const geoPoint = (point: LatLng): Point => ({ type: 'Point', coordinates: geoToPosition(point) });
+export const geoPoint = (point: LatLngLiteral): Point => ({ type: 'Point', coordinates: geoToPosition(point) });
 
 // https://github.com/d3/d3-geo#geoCircle
-export const geoCircle = ({ lat, lng }: LatLng, radius: number): Polygon =>
+export const geoCircle = ({ lat, lng }: LatLngLiteral, radius: number): Polygon =>
   d3GeoCircle().radius(radius).center([lng, lat])();
 
-export const geoLine = (p1: LatLng, p2: LatLng): GeoGeometryObjects => ({
+export const geoLine = (p1: LatLngLiteral, p2: LatLngLiteral): GeoGeometryObjects => ({
   type: 'LineString',
   coordinates: [
     [p1.lng, p1.lat],

package/src/util/render.ts

@@ -6,7 +6,9 @@ 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';
+import { type LatLngLiteral } from '../types';
+
+import { geoLine, geoPoint } from './path';
 
 export type Styles = Record<string, any>;
 
@@ -25,8 +27,8 @@ export type Style =
 export type StyleSet = Partial<Record<Style, Styles>>;
 
 export type Features = {
-  points?: LatLng[];
-  lines?: { source: LatLng; target: LatLng }[];
+  points?: LatLngLiteral[];
+  lines?: { source: LatLngLiteral; target: LatLngLiteral }[];
 };
 
 export type Layer = {

package/dist/lib/browser/chunk-ENCWOTYX.mjs

@@ -1,9 +0,0 @@
-// packages/ui/react-ui-geo/src/data.ts
-var loadTopology = async () => {
-  return (await import("./countries-110m-WI4PCLDF.mjs")).default;
-};
-
-export {
-  loadTopology
-};
-//# sourceMappingURL=chunk-ENCWOTYX.mjs.map