@dxos/react-ui-geo 0.8.4-main.b97322e → 0.8.4-main.bc2380dfbc

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

@@ -3,7 +3,6 @@
 //
 
 export * from './components';
-export * from './data';
 export * from './hooks';
 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,8 @@ 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 +26,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-GMWLKTLN.mjs

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

package/dist/lib/browser/chunk-GMWLKTLN.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/data.ts"],
-  "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { type Topology } from 'topojson-specification';\n\nexport const loadTopology = async (): Promise<Topology> => {\n  return (await import('../data/countries-110m.ts')).default;\n};\n"],
-  "mappings": ";AAMO,IAAMA,eAAe,YAAA;AAC1B,UAAQ,MAAM,OAAO,+BAAA,GAA8BC;AACrD;",
-  "names": ["loadTopology", "default"]
-}

package/dist/lib/node-esm/chunk-JODBF4CC.mjs

@@ -1,11 +0,0 @@
-import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
-
-// src/data.ts
-var loadTopology = async () => {
-  return (await import("./countries-110m-3SFASWVD.mjs")).default;
-};
-
-export {
-  loadTopology
-};
-//# sourceMappingURL=chunk-JODBF4CC.mjs.map

package/dist/lib/node-esm/chunk-JODBF4CC.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/data.ts"],
-  "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { type Topology } from 'topojson-specification';\n\nexport const loadTopology = async (): Promise<Topology> => {\n  return (await import('../data/countries-110m.ts')).default;\n};\n"],
-  "mappings": ";;;AAMO,IAAMA,eAAe,YAAA;AAC1B,UAAQ,MAAM,OAAO,+BAAA,GAA8BC;AACrD;",
-  "names": ["loadTopology", "default"]
-}

package/dist/types/src/components/types.d.ts

@@ -1,15 +0,0 @@
-import { type LatLngLiteral } from 'leaflet';
-import { type ThemedClassName } from '@dxos/react-ui';
-import { type MapMarker } from '../types';
-export { type LatLngLiteral };
-export type MapCanvasProps = ThemedClassName<{
-    markers?: MapMarker[];
-    selected?: string[];
-    zoom?: number;
-    center?: LatLngLiteral;
-    onChange?: (ev: {
-        center: LatLngLiteral;
-        zoom: number;
-    }) => void;
-}>;
-//# sourceMappingURL=types.d.ts.map

package/dist/types/src/components/types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/types.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7C,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEtD,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,UAAU,CAAC;AAE1C,OAAO,EAAE,KAAK,aAAa,EAAE,CAAC;AAE9B,MAAM,MAAM,cAAc,GAAG,eAAe,CAAC;IAC3C,OAAO,CAAC,EAAE,SAAS,EAAE,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE;QAAE,MAAM,EAAE,aAAa,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CAClE,CAAC,CAAC"}

package/src/components/types.ts

@@ -1,19 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { type LatLngLiteral } from 'leaflet';
-
-import { type ThemedClassName } from '@dxos/react-ui';
-
-import { type MapMarker } from '../types';
-
-export { type LatLngLiteral };
-
-export type MapCanvasProps = ThemedClassName<{
-  markers?: MapMarker[];
-  selected?: string[];
-  zoom?: number;
-  center?: LatLngLiteral;
-  onChange?: (ev: { center: LatLngLiteral; zoom: number }) => void;
-}>;