@dxos/react-ui-geo 0.8.4-main.dedc0f3 → 0.8.4-main.dfabb4ec29

package/src/components/Toolbar/Controls.tsx

@@ -5,7 +5,9 @@
 import { type ControlPosition } from 'leaflet';
 import React from 'react';
 
-import { IconButton, type ThemedClassName, Toolbar } from '@dxos/react-ui';
+import { IconButton, type ThemedClassName, Toolbar, useTranslation } from '@dxos/react-ui';
+
+import { translationKey } from '#translations';
 
 export type ControlAction = 'toggle' | 'start' | 'zoom-in' | 'zoom-out';
 
@@ -21,22 +23,20 @@ export const controlPositions: Record<ControlPosition, string> = {
 };
 
 export const ZoomControls = ({ classNames, onAction }: ControlProps) => {
+  const { t } = useTranslation(translationKey);
+
   return (
     <Toolbar.Root classNames={['gap-2', classNames]}>
       <IconButton
         icon='ph--plus--regular'
-        label='zoom in'
         iconOnly
-        size={5}
-        classNames='px-0 aspect-square'
+        label={t('zoom-in-icon.button')}
         onClick={() => onAction?.('zoom-in')}
       />
       <IconButton
         icon='ph--minus--regular'
-        label='zoom out'
         iconOnly
-        size={5}
-        classNames='px-0 aspect-square'
+        label={t('zoom-out-icon.button')}
         onClick={() => onAction?.('zoom-out')}
       />
     </Toolbar.Root>
@@ -44,22 +44,20 @@ export const ZoomControls = ({ classNames, onAction }: ControlProps) => {
 };
 
 export const ActionControls = ({ classNames, onAction }: ControlProps) => {
+  const { t } = useTranslation(translationKey);
+
   return (
     <Toolbar.Root classNames={['gap-2', classNames]}>
       <IconButton
-        icon='ph--play--regular'
-        label='start'
+        icon='ph--path--regular'
         iconOnly
-        size={5}
-        classNames='px-0 aspect-square'
+        label={t('start-icon.button')}
         onClick={() => onAction?.('start')}
       />
       <IconButton
         icon='ph--globe-hemisphere-west--regular'
-        label='toggle'
         iconOnly
-        size={5}
-        classNames='px-0 aspect-square'
+        label={t('toggle-icon.button')}
         onClick={() => onAction?.('toggle')}
       />
     </Toolbar.Root>

package/src/hooks/context.tsx

@@ -2,16 +2,17 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { type Dispatch, type PropsWithChildren, type SetStateAction, createContext, useContext } from 'react';
+import { type Dispatch, type SetStateAction, createContext, useContext } from 'react';
 
 import { raise } from '@dxos/debug';
-import { useControlledState } from '@dxos/react-ui';
 
 import { type LatLngLiteral } from '../types';
 
 // TODO(burdon): Factor out common geometry types.
 export type Size = { width: number; height: number };
+
 export type Point = { x: number; y: number };
+
 export type Vector = [number, number, number];
 
 export type GlobeContextType = {
@@ -26,33 +27,9 @@ export type GlobeContextType = {
   setRotation: Dispatch<SetStateAction<Vector>>;
 };
 
-const GlobeContext = createContext<GlobeContextType>(undefined);
-
-export type GlobeContextProviderProps = PropsWithChildren<
-  Partial<Pick<GlobeContextType, 'size' | 'center' | 'zoom' | 'translation' | 'rotation'>>
->;
-
-export const GlobeContextProvider = ({
-  children,
-  size,
-  center: _center,
-  zoom: _zoom,
-  translation: _translation,
-  rotation: _rotation,
-}: GlobeContextProviderProps) => {
-  const [center, setCenter] = useControlledState(_center);
-  const [zoom, setZoom] = useControlledState(_zoom);
-  const [translation, setTranslation] = useControlledState<Point>(_translation);
-  const [rotation, setRotation] = useControlledState<Vector>(_rotation);
-
-  return (
-    <GlobeContext.Provider
-      value={{ size, center, zoom, translation, rotation, setCenter, setZoom, setTranslation, setRotation }}
-    >
-      {children}
-    </GlobeContext.Provider>
-  );
-};
+/** @internal */
+// TODO(burdon): Replace with radix.
+export const GlobeContext = createContext<GlobeContextType>(undefined);
 
 export const useGlobeContext = () => {
   return useContext(GlobeContext) ?? raise(new Error('Missing GlobeContext'));

package/src/hooks/useGlobeZoomHandler.ts

@@ -6,6 +6,8 @@ import { useCallback } from 'react';
 
 import { type ControlProps, type GlobeController } from '../components';
 
+const ZOOM_FACTOR = 0.1;
+
 export const useGlobeZoomHandler = (controller: GlobeController | null | undefined): ControlProps['onAction'] => {
   return useCallback<ControlProps['onAction']>(
     (event) => {
@@ -15,11 +17,15 @@ export const useGlobeZoomHandler = (controller: GlobeController | null | undefin
 
       switch (event) {
         case 'zoom-in': {
-          controller.setZoom((zoom) => zoom * 1.1);
+          controller.setZoom((zoom) => {
+            return zoom * (1 + ZOOM_FACTOR);
+          });
           break;
         }
         case 'zoom-out': {
-          controller.setZoom((zoom) => zoom * 0.9);
+          controller.setZoom((zoom) => {
+            return zoom * (1 - ZOOM_FACTOR);
+          });
           break;
         }
       }

package/src/hooks/useSpinner.ts

@@ -7,7 +7,6 @@ import { type Timer } from 'd3';
 import { useEffect, useState } from 'react';
 
 import { type GlobeController } from '../components';
-
 import { type Vector } from './context';
 
 export type SpinnerOptions = {

package/src/hooks/useTour.ts

@@ -34,6 +34,7 @@ export const useTour = (
   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) {

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/util/render.ts

@@ -7,7 +7,6 @@ import { feature, mesh } from 'topojson-client';
 import { type Topology } from 'topojson-specification';
 
 import { type LatLngLiteral } from '../types';
-
 import { geoLine, geoPoint } from './path';
 
 export type Styles = Record<string, any>;

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"]
-}