@dxos/react-ui-geo 0.8.4-main.ef1bc66f44 → 0.8.4-main.f466a3d56e

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (66) hide show
  1. package/LICENSE +102 -5
  2. package/dist/lib/browser/{countries-110m-ZM3ZIEFS.mjs → countries-110m-RE5RNRQG.mjs} +1 -1
  3. package/dist/lib/browser/data.mjs +4 -3
  4. package/dist/lib/browser/data.mjs.map +4 -4
  5. package/dist/lib/browser/index.mjs +101 -117
  6. package/dist/lib/browser/index.mjs.map +4 -4
  7. package/dist/lib/browser/meta.json +1 -1
  8. package/dist/lib/browser/translations.mjs +19 -0
  9. package/dist/lib/browser/translations.mjs.map +7 -0
  10. package/dist/lib/node-esm/{countries-110m-3SFASWVD.mjs → countries-110m-4EDBXSFJ.mjs} +1 -1
  11. package/dist/lib/node-esm/data.mjs +5 -3
  12. package/dist/lib/node-esm/data.mjs.map +4 -4
  13. package/dist/lib/node-esm/index.mjs +101 -116
  14. package/dist/lib/node-esm/index.mjs.map +4 -4
  15. package/dist/lib/node-esm/meta.json +1 -1
  16. package/dist/lib/node-esm/translations.mjs +21 -0
  17. package/dist/lib/node-esm/translations.mjs.map +7 -0
  18. package/dist/types/data/airports.d.ts +4 -4
  19. package/dist/types/data/airports.d.ts.map +1 -1
  20. package/dist/types/data/cities.d.ts.map +1 -1
  21. package/dist/types/data/countries-110m.d.ts.map +1 -1
  22. package/dist/types/data/countries-dots-3.d.ts.map +1 -1
  23. package/dist/types/data/countries-dots-4.d.ts.map +1 -1
  24. package/dist/types/src/components/Globe/Globe.d.ts +5 -3
  25. package/dist/types/src/components/Globe/Globe.d.ts.map +1 -1
  26. package/dist/types/src/components/Globe/Globe.stories.d.ts +6 -4
  27. package/dist/types/src/components/Globe/Globe.stories.d.ts.map +1 -1
  28. package/dist/types/src/components/Map/Map.d.ts +18 -4
  29. package/dist/types/src/components/Map/Map.d.ts.map +1 -1
  30. package/dist/types/src/components/Map/Map.stories.d.ts.map +1 -1
  31. package/dist/types/src/components/Toolbar/Controls.d.ts.map +1 -1
  32. package/dist/types/src/hooks/context.d.ts +1 -3
  33. package/dist/types/src/hooks/context.d.ts.map +1 -1
  34. package/dist/types/src/hooks/useDrag.d.ts.map +1 -1
  35. package/dist/types/src/hooks/useGlobeZoomHandler.d.ts +1 -1
  36. package/dist/types/src/hooks/useGlobeZoomHandler.d.ts.map +1 -1
  37. package/dist/types/src/hooks/useMapZoomHandler.d.ts +1 -1
  38. package/dist/types/src/hooks/useMapZoomHandler.d.ts.map +1 -1
  39. package/dist/types/src/hooks/useSpinner.d.ts.map +1 -1
  40. package/dist/types/src/hooks/useTour.d.ts.map +1 -1
  41. package/dist/types/src/index.d.ts +0 -2
  42. package/dist/types/src/index.d.ts.map +1 -1
  43. package/dist/types/src/translations.d.ts +4 -4
  44. package/dist/types/src/translations.d.ts.map +1 -1
  45. package/dist/types/src/util/debug.d.ts.map +1 -1
  46. package/dist/types/src/util/inertia.d.ts.map +1 -1
  47. package/dist/types/src/util/path.d.ts.map +1 -1
  48. package/dist/types/src/util/render.d.ts.map +1 -1
  49. package/dist/types/tsconfig.tsbuildinfo +1 -1
  50. package/package.json +27 -24
  51. package/src/components/Globe/Globe.stories.tsx +8 -9
  52. package/src/components/Globe/Globe.tsx +48 -22
  53. package/src/components/Map/Map.stories.tsx +9 -8
  54. package/src/components/Map/Map.tsx +65 -26
  55. package/src/components/Toolbar/Controls.tsx +5 -5
  56. package/src/hooks/context.tsx +5 -34
  57. package/src/hooks/useSpinner.ts +0 -1
  58. package/src/index.ts +0 -2
  59. package/src/translations.ts +4 -4
  60. package/src/util/render.ts +0 -1
  61. package/dist/lib/browser/chunk-GMWLKTLN.mjs +0 -9
  62. package/dist/lib/browser/chunk-GMWLKTLN.mjs.map +0 -7
  63. package/dist/lib/node-esm/chunk-JODBF4CC.mjs +0 -11
  64. package/dist/lib/node-esm/chunk-JODBF4CC.mjs.map +0 -7
  65. /package/dist/lib/browser/{countries-110m-ZM3ZIEFS.mjs.map → countries-110m-RE5RNRQG.mjs.map} +0 -0
  66. /package/dist/lib/node-esm/{countries-110m-3SFASWVD.mjs.map → countries-110m-4EDBXSFJ.mjs.map} +0 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dxos/react-ui-geo",
3
- "version": "0.8.4-main.ef1bc66f44",
3
+ "version": "0.8.4-main.f466a3d56e",
4
4
  "description": "Geo components.",
5
5
  "homepage": "https://github.com/dxos",
6
6
  "bugs": "https://github.com/dxos/issues",
@@ -8,38 +8,41 @@
8
8
  "type": "git",
9
9
  "url": "https://github.com/dxos/dxos"
10
10
  },
11
- "license": "MIT",
11
+ "license": "FSL-1.1-Apache-2.0",
12
12
  "author": "DXOS.org",
13
13
  "sideEffects": true,
14
14
  "type": "module",
15
+ "imports": {
16
+ "#translations": "./src/translations.ts"
17
+ },
15
18
  "exports": {
19
+ ".": {
20
+ "source": "./src/index.ts",
21
+ "types": "./dist/types/src/index.d.ts",
22
+ "browser": "./dist/lib/browser/index.mjs",
23
+ "node": "./dist/lib/node-esm/index.mjs"
24
+ },
16
25
  "./data": {
17
26
  "source": "./src/data.ts",
18
27
  "types": "./dist/types/src/data.d.ts",
19
28
  "browser": "./dist/lib/browser/data.mjs",
20
29
  "node": "./dist/lib/node-esm/data.mjs"
21
30
  },
22
- ".": {
23
- "source": "./src/index.ts",
24
- "types": "./dist/types/src/index.d.ts",
25
- "browser": "./dist/lib/browser/index.mjs",
26
- "node": "./dist/lib/node-esm/index.mjs"
31
+ "./translations": {
32
+ "source": "./src/translations.ts",
33
+ "types": "./dist/types/src/translations.d.ts",
34
+ "browser": "./dist/lib/browser/translations.mjs",
35
+ "node": "./dist/lib/node-esm/translations.mjs"
27
36
  }
28
37
  },
29
38
  "types": "dist/types/src/index.d.ts",
30
- "typesVersions": {
31
- "*": {
32
- "data": [
33
- "dist/types/src/data.d.ts"
34
- ]
35
- }
36
- },
37
39
  "files": [
38
40
  "data",
39
41
  "dist",
40
42
  "src"
41
43
  ],
42
44
  "dependencies": {
45
+ "@radix-ui/react-compose-refs": "1.1.1",
43
46
  "@radix-ui/react-context": "1.1.1",
44
47
  "d3": "^7.9.0",
45
48
  "d3-geo-projection": "^4.0.0",
@@ -52,11 +55,11 @@
52
55
  "topojson-client": "^3.1.0",
53
56
  "topojson-simplify": "^3.0.3",
54
57
  "versor": "^0.2.0",
55
- "@dxos/async": "0.8.4-main.ef1bc66f44",
56
- "@dxos/debug": "0.8.4-main.ef1bc66f44",
57
- "@dxos/node-std": "0.8.4-main.ef1bc66f44",
58
- "@dxos/util": "0.8.4-main.ef1bc66f44",
59
- "@dxos/log": "0.8.4-main.ef1bc66f44"
58
+ "@dxos/async": "0.8.4-main.f466a3d56e",
59
+ "@dxos/log": "0.8.4-main.f466a3d56e",
60
+ "@dxos/util": "0.8.4-main.f466a3d56e",
61
+ "@dxos/node-std": "0.8.4-main.f466a3d56e",
62
+ "@dxos/debug": "0.8.4-main.f466a3d56e"
60
63
  },
61
64
  "devDependencies": {
62
65
  "@react-three/drei": "^10.7.7",
@@ -76,15 +79,15 @@
76
79
  "react": "~19.2.3",
77
80
  "react-dom": "~19.2.3",
78
81
  "three": "^0.178.0",
79
- "@dxos/react-ui": "0.8.4-main.ef1bc66f44",
80
- "@dxos/storybook-utils": "0.8.4-main.ef1bc66f44",
81
- "@dxos/ui-theme": "0.8.4-main.ef1bc66f44"
82
+ "@dxos/react-ui": "0.8.4-main.f466a3d56e",
83
+ "@dxos/storybook-utils": "0.8.4-main.f466a3d56e",
84
+ "@dxos/ui-theme": "0.8.4-main.f466a3d56e"
82
85
  },
83
86
  "peerDependencies": {
84
87
  "react": "~19.2.3",
85
88
  "react-dom": "~19.2.3",
86
- "@dxos/react-ui": "0.8.4-main.ef1bc66f44",
87
- "@dxos/ui-theme": "0.8.4-main.ef1bc66f44"
89
+ "@dxos/ui-theme": "0.8.4-main.f466a3d56e",
90
+ "@dxos/react-ui": "0.8.4-main.f466a3d56e"
88
91
  },
89
92
  "publishConfig": {
90
93
  "access": "public"
@@ -9,13 +9,12 @@ import React, { useMemo, useRef, useState } from 'react';
9
9
  import { type Topology } from 'topojson-specification';
10
10
 
11
11
  import { useAsyncState } from '@dxos/react-ui';
12
- import { withTheme } from '@dxos/react-ui/testing';
12
+ import { withLayout, withTheme } from '@dxos/react-ui/testing';
13
13
 
14
14
  import { type Vector, useDrag, useGlobeZoomHandler, useSpinner, useTour } from '../../hooks';
15
15
  import { type LatLngLiteral } from '../../types';
16
16
  import { type StyleSet, closestPoint } from '../../util';
17
17
  import { type ControlProps } from '../Toolbar';
18
-
19
18
  import { Globe, type GlobeCanvasProps, type GlobeController, type GlobeRootProps } from './Globe';
20
19
 
21
20
  // TODO(burdon): Load from JSON at runtime?
@@ -128,7 +127,7 @@ const createTrip = (
128
127
  );
129
128
  };
130
129
 
131
- type StoryProps = Pick<GlobeRootProps, 'zoom' | 'translation' | 'rotation'> &
130
+ type DefaultStoryProps = Pick<GlobeRootProps, 'zoom' | 'translation' | 'rotation'> &
132
131
  Pick<GlobeCanvasProps, 'projection' | 'styles'> & {
133
132
  drag?: boolean;
134
133
  spin?: boolean;
@@ -137,7 +136,7 @@ type StoryProps = Pick<GlobeRootProps, 'zoom' | 'translation' | 'rotation'> &
137
136
  };
138
137
 
139
138
  const DefaultStory = ({
140
- zoom: _zoom = 1,
139
+ zoom: zoomProp = 1,
141
140
  translation,
142
141
  rotation = [0, 0, 0],
143
142
  projection,
@@ -146,7 +145,7 @@ const DefaultStory = ({
146
145
  spin = false,
147
146
  tour = false,
148
147
  xAxis = false,
149
- }: StoryProps) => {
148
+ }: DefaultStoryProps) => {
150
149
  const controller = useRef<GlobeController>(null);
151
150
  const [dots] = useAsyncState(async () => {
152
151
  const points = (await import('../../../data/countries-dots-3.ts')).default;
@@ -203,18 +202,18 @@ const DefaultStory = ({
203
202
  };
204
203
 
205
204
  return (
206
- <Globe.Root classNames='absolute inset-0' zoom={_zoom} translation={translation} rotation={rotation}>
205
+ <Globe.Root zoom={zoomProp} translation={translation} rotation={rotation}>
207
206
  <Globe.Canvas
208
- ref={controller}
209
207
  topology={styles?.dots ? dots : topology}
210
208
  projection={projection}
211
209
  styles={styles}
212
210
  features={tour ? { points: features?.points ?? [] } : features}
211
+ ref={controller}
213
212
  />
214
213
  <Globe.Zoom onAction={handleAction} />
215
214
  <Globe.Action onAction={handleAction} />
216
215
  <Globe.Debug />
217
- <Globe.Panel position='topright' classNames='is-20 bs-20'>
216
+ <Globe.Panel position='topright' classNames='w-20 h-20'>
218
217
  <Leva />
219
218
  </Globe.Panel>
220
219
  </Globe.Root>
@@ -227,7 +226,7 @@ const meta = {
227
226
  title: 'ui/react-ui-geo/Globe',
228
227
  component: Globe.Root,
229
228
  render: DefaultStory,
230
- decorators: [withTheme()],
229
+ decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
231
230
  parameters: {
232
231
  layout: 'fullscreen',
233
232
  },
@@ -26,15 +26,17 @@ import React, {
26
26
  import { useResizeDetector } from 'react-resize-detector';
27
27
  import { type Topology } from 'topojson-specification';
28
28
 
29
- import { type ThemeMode, type ThemedClassName, useDynamicRef, useThemeContext } from '@dxos/react-ui';
30
- import { mx } from '@dxos/ui-theme';
31
-
32
29
  import {
33
- GlobeContextProvider,
34
- type GlobeContextProviderProps,
35
- type GlobeContextType,
36
- useGlobeContext,
37
- } from '../../hooks';
30
+ type ThemeMode,
31
+ type ThemedClassName,
32
+ useComposedRefs,
33
+ useControlledState,
34
+ useDynamicRef,
35
+ useThemeContext,
36
+ } from '@dxos/react-ui';
37
+ import { composable, composableProps, mx } from '@dxos/ui-theme';
38
+
39
+ import { GlobeContext, type GlobeContextType, type Point, type Vector, useGlobeContext } from '../../hooks';
38
40
  import {
39
41
  type Features,
40
42
  type StyleSet,
@@ -126,19 +128,43 @@ const getProjection = (type: GlobeCanvasProps['projection'] = 'orthographic'): G
126
128
  // Root
127
129
  //
128
130
 
129
- type GlobeRootProps = PropsWithChildren<ThemedClassName<GlobeContextProviderProps>>;
130
-
131
- const GlobeRoot = ({ classNames, children, ...props }: GlobeRootProps) => {
132
- const { ref, width, height } = useResizeDetector<HTMLDivElement>();
133
-
134
- return (
135
- <div ref={ref} className={mx('relative flex grow overflow-hidden', classNames)}>
136
- <GlobeContextProvider size={{ width, height }} {...props}>
137
- {children}
138
- </GlobeContextProvider>
139
- </div>
140
- );
141
- };
131
+ type GlobeRootProps = Partial<Pick<GlobeContextType, 'center' | 'zoom' | 'translation' | 'rotation'>>;
132
+
133
+ const GlobeRoot = composable<HTMLDivElement, GlobeRootProps>(
134
+ (
135
+ { children, center: centerProp, zoom: zoomProp, translation: translationProp, rotation: rotationProp, ...props },
136
+ forwardedRef,
137
+ ) => {
138
+ const localRef = useRef<HTMLDivElement>(null);
139
+ const composedRef = useComposedRefs<HTMLDivElement>(localRef, forwardedRef);
140
+ const { width, height } = useResizeDetector<HTMLDivElement>({ targetRef: localRef });
141
+
142
+ const [center, setCenter] = useControlledState(centerProp);
143
+ const [zoom, setZoom] = useControlledState(zoomProp ?? 4);
144
+ const [translation, setTranslation] = useControlledState<Point>(translationProp);
145
+ const [rotation, setRotation] = useControlledState<Vector>(rotationProp);
146
+
147
+ return (
148
+ <GlobeContext.Provider
149
+ value={{
150
+ size: { width, height },
151
+ center,
152
+ zoom,
153
+ translation,
154
+ rotation,
155
+ setCenter,
156
+ setZoom,
157
+ setTranslation,
158
+ setRotation,
159
+ }}
160
+ >
161
+ <div {...composableProps(props, { classNames: 'relative dx-container' })} ref={composedRef}>
162
+ {children}
163
+ </div>
164
+ </GlobeContext.Provider>
165
+ );
166
+ },
167
+ );
142
168
 
143
169
  //
144
170
  // Canvas
@@ -259,7 +285,7 @@ const GlobeDebug = ({ position = 'topleft' }: { position?: ControlPosition }) =>
259
285
  return (
260
286
  <div
261
287
  className={mx(
262
- 'z-10 absolute is-96 p-2 overflow-hidden border border-green-700 rounded',
288
+ 'z-10 absolute w-96 p-2 overflow-hidden border border-green-700 rounded-sm',
263
289
  controlPositions[position],
264
290
  )}
265
291
  >
@@ -5,11 +5,10 @@
5
5
  import { type Meta, type StoryObj } from '@storybook/react-vite';
6
6
  import React, { useState } from 'react';
7
7
 
8
- import { withTheme } from '@dxos/react-ui/testing';
8
+ import { withLayout, withTheme } from '@dxos/react-ui/testing';
9
9
 
10
10
  import { useMapZoomHandler } from '../../hooks';
11
11
  import { type GeoMarker } from '../../types';
12
-
13
12
  import { Map, type MapController } from './Map';
14
13
 
15
14
  const DefaultStory = ({ markers = [] }: { markers?: GeoMarker[] }) => {
@@ -17,11 +16,13 @@ const DefaultStory = ({ markers = [] }: { markers?: GeoMarker[] }) => {
17
16
  const handleZoomAction = useMapZoomHandler(controller);
18
17
 
19
18
  return (
20
- <Map.Root ref={setController}>
21
- <Map.Tiles />
22
- <Map.Markers markers={markers} />
23
- <Map.Zoom position='bottomleft' onAction={handleZoomAction} />
24
- <Map.Action position='bottomright' />
19
+ <Map.Root>
20
+ <Map.Content ref={setController}>
21
+ <Map.Tiles />
22
+ <Map.Markers markers={markers} />
23
+ <Map.Zoom position='bottomleft' onAction={handleZoomAction} />
24
+ <Map.Action position='bottomright' />
25
+ </Map.Content>
25
26
  </Map.Root>
26
27
  );
27
28
  };
@@ -30,7 +31,7 @@ const meta = {
30
31
  title: 'ui/react-ui-geo/Map',
31
32
  component: Map.Root as any,
32
33
  render: DefaultStory,
33
- decorators: [withTheme()],
34
+ decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
34
35
  parameters: {
35
36
  layout: 'fullscreen',
36
37
  },
@@ -6,12 +6,12 @@ import 'leaflet/dist/leaflet.css';
6
6
 
7
7
  import { createContext } from '@radix-ui/react-context';
8
8
  import L, { Control, type ControlPosition, DomEvent, DomUtil, type LatLngLiteral, latLngBounds } from 'leaflet';
9
- import React, { type PropsWithChildren, forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
9
+ import React, { type PropsWithChildren, forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
10
10
  import { createRoot } from 'react-dom/client';
11
11
  import { MapContainer, type MapContainerProps, Marker, Popup, TileLayer, useMap, useMapEvents } from 'react-leaflet';
12
12
 
13
- import { ThemeProvider, type ThemedClassName, Tooltip } from '@dxos/react-ui';
14
- import { defaultTx, mx } from '@dxos/ui-theme';
13
+ import { type ThemedClassName, ThemeProvider, Tooltip } from '@dxos/react-ui';
14
+ import { composable, composableProps, defaultTx, mx } from '@dxos/ui-theme';
15
15
 
16
16
  import { type GeoMarker } from '../../types';
17
17
  import { ActionControls, type ControlProps, ZoomControls, controlPositions } from '../Toolbar';
@@ -43,23 +43,54 @@ type MapContextValue = {
43
43
  onChange?: (ev: { center: LatLngLiteral; zoom: number }) => void;
44
44
  };
45
45
 
46
- const [MapContextProvier, useMapContext] = createContext<MapContextValue>('Map');
46
+ const [MapContextProvider, useMapContext] = createContext<MapContextValue>('Map');
47
47
 
48
48
  //
49
49
  // Root
50
50
  //
51
51
 
52
- type MapRootProps = ThemedClassName<MapContainerProps & Pick<MapContextValue, 'onChange'>>;
52
+ type MapRootProps = Pick<MapContextValue, 'onChange'>;
53
+
54
+ /**
55
+ * Context provider for the map. Must wrap Map.Content.
56
+ */
57
+ const MapRoot = composable<HTMLDivElement, MapRootProps>(({ children, onChange, ...props }, forwardedRef) => {
58
+ // TODO(burdon): Use attention: const [attention, setAttention] = useState(false);
59
+ const attention = false;
60
+ return (
61
+ <MapContextProvider attention={attention} onChange={onChange}>
62
+ <div
63
+ {...composableProps(props, {
64
+ role: 'none',
65
+ classNames: 'dx-container grid dx-focus-ring-inset',
66
+ })}
67
+ ref={forwardedRef}
68
+ >
69
+ {children}
70
+ </div>
71
+ </MapContextProvider>
72
+ );
73
+ });
74
+
75
+ MapRoot.displayName = 'Map.Root';
76
+
77
+ //
78
+ // Content
79
+ //
80
+
81
+ type MapContentProps = ThemedClassName<Omit<MapContainerProps, 'children'> & PropsWithChildren>;
53
82
 
54
83
  /**
55
84
  * https://react-leaflet.js.org/docs/api-map
56
85
  */
57
- const MapRoot = forwardRef<MapController, MapRootProps>(
86
+ const MAP_CONTENT_NAME = 'Map.Content';
87
+
88
+ const MapContent = forwardRef<MapController, MapContentProps>(
58
89
  (
59
- { classNames, scrollWheelZoom = true, doubleClickZoom = true, touchZoom = true, center, zoom, onChange, ...props },
90
+ { classNames, scrollWheelZoom = true, doubleClickZoom = true, touchZoom = true, center, zoom, children, ...props },
60
91
  forwardedRef,
61
92
  ) => {
62
- const [attention, setAttention] = useState(false);
93
+ const { attention } = useMapContext(MAP_CONTENT_NAME);
63
94
  const mapRef = useRef<L.Map>(null);
64
95
  const map = mapRef.current;
65
96
 
@@ -92,26 +123,26 @@ const MapRoot = forwardRef<MapController, MapRootProps>(
92
123
  }, [map, attention]);
93
124
 
94
125
  return (
95
- <MapContextProvier attention={attention} onChange={onChange}>
96
- <MapContainer
97
- {...props}
98
- ref={mapRef}
99
- className={mx('group relative grid bs-full is-full !bg-baseSurface dx-focus-ring-inset', classNames)}
100
- attributionControl={false}
101
- zoomControl={false}
102
- scrollWheelZoom={scrollWheelZoom}
103
- doubleClickZoom={doubleClickZoom}
104
- touchZoom={touchZoom}
105
- center={center ?? defaults.center}
106
- zoom={zoom ?? defaults.zoom}
107
- // whenReady={() => {}}
108
- />
109
- </MapContextProvier>
126
+ <MapContainer
127
+ {...props}
128
+ className={mx('group relative grid bg-base-surface!', classNames)}
129
+ attributionControl={false}
130
+ zoomControl={false}
131
+ scrollWheelZoom={scrollWheelZoom}
132
+ doubleClickZoom={doubleClickZoom}
133
+ touchZoom={touchZoom}
134
+ center={center ?? defaults.center}
135
+ zoom={zoom ?? defaults.zoom}
136
+ whenReady={() => {}}
137
+ ref={mapRef}
138
+ >
139
+ {children}
140
+ </MapContainer>
110
141
  );
111
142
  },
112
143
  );
113
144
 
114
- MapRoot.displayName = 'Map.Root';
145
+ MapContent.displayName = 'Map.Content';
115
146
 
116
147
  //
117
148
  // Tiles
@@ -249,7 +280,7 @@ const CustomControl = ({
249
280
  useEffect(() => {
250
281
  const control = new Control({ position });
251
282
  control.onAdd = () => {
252
- const container = DomUtil.create('div', mx('!m-0', controlPositions[position]));
283
+ const container = DomUtil.create('div', mx('m-0!', controlPositions[position]));
253
284
  DomEvent.disableClickPropagation(container);
254
285
  DomEvent.disableScrollPropagation(container);
255
286
 
@@ -292,10 +323,18 @@ const MapAction = ({ onAction, position = 'bottomright', ...props }: MapControlP
292
323
 
293
324
  export const Map = {
294
325
  Root: MapRoot,
326
+ Content: MapContent,
295
327
  Tiles: MapTiles,
296
328
  Markers: MapMarkers,
297
329
  Zoom: MapZoom,
298
330
  Action: MapAction,
299
331
  };
300
332
 
301
- export { type MapController, type MapRootProps, type MapTilesProps, type MapMarkersProps, type MapControlProps };
333
+ export {
334
+ type MapController,
335
+ type MapRootProps,
336
+ type MapContentProps,
337
+ type MapTilesProps,
338
+ type MapMarkersProps,
339
+ type MapControlProps,
340
+ };
@@ -7,7 +7,7 @@ import React from 'react';
7
7
 
8
8
  import { IconButton, type ThemedClassName, Toolbar, useTranslation } from '@dxos/react-ui';
9
9
 
10
- import { translationKey } from '../../translations';
10
+ import { translationKey } from '#translations';
11
11
 
12
12
  export type ControlAction = 'toggle' | 'start' | 'zoom-in' | 'zoom-out';
13
13
 
@@ -30,13 +30,13 @@ export const ZoomControls = ({ classNames, onAction }: ControlProps) => {
30
30
  <IconButton
31
31
  icon='ph--plus--regular'
32
32
  iconOnly
33
- label={t('zoom in icon button')}
33
+ label={t('zoom-in-icon.button')}
34
34
  onClick={() => onAction?.('zoom-in')}
35
35
  />
36
36
  <IconButton
37
37
  icon='ph--minus--regular'
38
38
  iconOnly
39
- label={t('zoom out icon button')}
39
+ label={t('zoom-out-icon.button')}
40
40
  onClick={() => onAction?.('zoom-out')}
41
41
  />
42
42
  </Toolbar.Root>
@@ -51,13 +51,13 @@ export const ActionControls = ({ classNames, onAction }: ControlProps) => {
51
51
  <IconButton
52
52
  icon='ph--path--regular'
53
53
  iconOnly
54
- label={t('start icon button')}
54
+ label={t('start-icon.button')}
55
55
  onClick={() => onAction?.('start')}
56
56
  />
57
57
  <IconButton
58
58
  icon='ph--globe-hemisphere-west--regular'
59
59
  iconOnly
60
- label={t('toggle icon button')}
60
+ label={t('toggle-icon.button')}
61
61
  onClick={() => onAction?.('toggle')}
62
62
  />
63
63
  </Toolbar.Root>
@@ -2,16 +2,17 @@
2
2
  // Copyright 2024 DXOS.org
3
3
  //
4
4
 
5
- import React, { type Dispatch, type PropsWithChildren, type SetStateAction, createContext, useContext } from 'react';
5
+ import { type Dispatch, type SetStateAction, createContext, useContext } from 'react';
6
6
 
7
7
  import { raise } from '@dxos/debug';
8
- import { useControlledState } from '@dxos/react-ui';
9
8
 
10
9
  import { type LatLngLiteral } from '../types';
11
10
 
12
11
  // TODO(burdon): Factor out common geometry types.
13
12
  export type Size = { width: number; height: number };
13
+
14
14
  export type Point = { x: number; y: number };
15
+
15
16
  export type Vector = [number, number, number];
16
17
 
17
18
  export type GlobeContextType = {
@@ -26,39 +27,9 @@ export type GlobeContextType = {
26
27
  setRotation: Dispatch<SetStateAction<Vector>>;
27
28
  };
28
29
 
29
- const defaults = {
30
- center: { lat: 51, lng: 0 } as LatLngLiteral,
31
- zoom: 4,
32
- } as const;
33
-
30
+ /** @internal */
34
31
  // TODO(burdon): Replace with radix.
35
- const GlobeContext = createContext<GlobeContextType>(undefined);
36
-
37
- export type GlobeContextProviderProps = PropsWithChildren<
38
- Partial<Pick<GlobeContextType, 'size' | 'center' | 'zoom' | 'translation' | 'rotation'>>
39
- >;
40
-
41
- export const GlobeContextProvider = ({
42
- children,
43
- size,
44
- center: centerProp = defaults.center,
45
- zoom: zoomProp = defaults.zoom,
46
- translation: translationProp,
47
- rotation: rotationProp,
48
- }: GlobeContextProviderProps) => {
49
- const [center, setCenter] = useControlledState(centerProp);
50
- const [zoom, setZoom] = useControlledState(zoomProp);
51
- const [translation, setTranslation] = useControlledState<Point>(translationProp);
52
- const [rotation, setRotation] = useControlledState<Vector>(rotationProp);
53
-
54
- return (
55
- <GlobeContext.Provider
56
- value={{ size, center, zoom, translation, rotation, setCenter, setZoom, setTranslation, setRotation }}
57
- >
58
- {children}
59
- </GlobeContext.Provider>
60
- );
61
- };
32
+ export const GlobeContext = createContext<GlobeContextType>(undefined);
62
33
 
63
34
  export const useGlobeContext = () => {
64
35
  return useContext(GlobeContext) ?? raise(new Error('Missing GlobeContext'));
@@ -7,7 +7,6 @@ import { type Timer } from 'd3';
7
7
  import { useEffect, useState } from 'react';
8
8
 
9
9
  import { type GlobeController } from '../components';
10
-
11
10
  import { type Vector } from './context';
12
11
 
13
12
  export type SpinnerOptions = {
package/src/index.ts CHANGED
@@ -3,8 +3,6 @@
3
3
  //
4
4
 
5
5
  export * from './components';
6
- export * from './data';
7
6
  export * from './hooks';
8
- export * from './translations';
9
7
  export type * from './types';
10
8
  export * from './util';
@@ -10,10 +10,10 @@ export const translations = [
10
10
  {
11
11
  'en-US': {
12
12
  [translationKey]: {
13
- 'zoom in icon button': 'Zoom in',
14
- 'zoom out icon button': 'Zoom out',
15
- 'start icon button': 'Start',
16
- 'toggle icon button': 'Toggle',
13
+ 'zoom-in-icon.button': 'Zoom in',
14
+ 'zoom-out-icon.button': 'Zoom out',
15
+ 'start-icon.button': 'Start',
16
+ 'toggle-icon.button': 'Toggle',
17
17
  },
18
18
  },
19
19
  },
@@ -7,7 +7,6 @@ import { feature, mesh } from 'topojson-client';
7
7
  import { type Topology } from 'topojson-specification';
8
8
 
9
9
  import { type LatLngLiteral } from '../types';
10
-
11
10
  import { geoLine, geoPoint } from './path';
12
11
 
13
12
  export type Styles = Record<string, any>;
@@ -1,9 +0,0 @@
1
- // src/data.ts
2
- var loadTopology = async () => {
3
- return (await import("./countries-110m-ZM3ZIEFS.mjs")).default;
4
- };
5
-
6
- export {
7
- loadTopology
8
- };
9
- //# sourceMappingURL=chunk-GMWLKTLN.mjs.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../src/data.ts"],
4
- "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"],
5
- "mappings": ";AAMO,IAAMA,eAAe,YAAA;AAC1B,UAAQ,MAAM,OAAO,+BAAA,GAA8BC;AACrD;",
6
- "names": ["loadTopology", "default"]
7
- }
@@ -1,11 +0,0 @@
1
- import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
2
-
3
- // src/data.ts
4
- var loadTopology = async () => {
5
- return (await import("./countries-110m-3SFASWVD.mjs")).default;
6
- };
7
-
8
- export {
9
- loadTopology
10
- };
11
- //# sourceMappingURL=chunk-JODBF4CC.mjs.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../src/data.ts"],
4
- "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"],
5
- "mappings": ";;;AAMO,IAAMA,eAAe,YAAA;AAC1B,UAAQ,MAAM,OAAO,+BAAA,GAA8BC;AACrD;",
6
- "names": ["loadTopology", "default"]
7
- }