@dxos/react-ui-geo 0.8.3 → 0.8.4-main.3a94e84

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-geo",
-  "version": "0.8.3",
+  "version": "0.8.4-main.3a94e84",
   "description": "Geo components.",
   "homepage": "https://github.com/dxos",
   "bugs": "https://github.com/dxos/issues",
@@ -46,11 +46,11 @@
     "topojson-client": "^3.1.0",
     "topojson-simplify": "^3.0.3",
     "versor": "^0.2.0",
-    "@dxos/async": "0.8.3",
-    "@dxos/log": "0.8.3",
-    "@dxos/debug": "0.8.3",
-    "@dxos/util": "0.8.3",
-    "@dxos/node-std": "0.8.3"
+    "@dxos/async": "0.8.4-main.3a94e84",
+    "@dxos/debug": "0.8.4-main.3a94e84",
+    "@dxos/log": "0.8.4-main.3a94e84",
+    "@dxos/node-std": "0.8.4-main.3a94e84",
+    "@dxos/util": "0.8.4-main.3a94e84"
   },
   "devDependencies": {
     "@react-three/drei": "^9.99.0",
@@ -70,15 +70,15 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "three": "0.165.0",
-    "@dxos/react-ui": "0.8.3",
-    "@dxos/react-ui-theme": "0.8.3",
-    "@dxos/storybook-utils": "0.8.3"
+    "@dxos/react-ui": "0.8.4-main.3a94e84",
+    "@dxos/react-ui-theme": "0.8.4-main.3a94e84",
+    "@dxos/storybook-utils": "0.8.4-main.3a94e84"
   },
   "peerDependencies": {
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.3",
-    "@dxos/react-ui-theme": "0.8.3"
+    "@dxos/react-ui": "0.8.4-main.3a94e84",
+    "@dxos/react-ui-theme": "0.8.4-main.3a94e84"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Globe/Globe.stories.tsx

@@ -4,7 +4,7 @@
 
 import '@dxos-theme';
 
-import { type Meta } from '@storybook/react';
+import { type Meta } from '@storybook/react-vite';
 import { type FeatureCollection, type Geometry, type Position } from 'geojson';
 import { Leva } from 'leva';
 import React, { useMemo, useRef, useState } from 'react';
@@ -138,7 +138,7 @@ const Story = ({
   translation,
   rotation = [0, 0, 0],
   projection,
-  styles,
+  styles = defaultStyles,
   drag = false,
   spin = false,
   tour = false,
@@ -235,7 +235,7 @@ export const Earth1 = () => {
 
   return (
     <Globe.Root scale={1.2} rotation={[Math.random() * 360, 0, 0]}>
-      <Globe.Canvas ref={setController} topology={topology} />
+      <Globe.Canvas ref={setController} topology={topology} styles={defaultStyles} />
       <Globe.Zoom onAction={handleAction} />
     </Globe.Root>
   );
@@ -250,7 +250,7 @@ export const Earth2 = () => {
   return (
     <div className='absolute bottom-0 left-0 right-0 '>
       <Globe.Root classNames='h-[400px]' scale={2.8} translation={{ x: 0, y: 400 }}>
-        <Globe.Canvas ref={setController} topology={topology} />
+        <Globe.Canvas ref={setController} topology={topology} styles={defaultStyles} />
         <Globe.Zoom onAction={handleAction} />
       </Globe.Root>
     </div>
@@ -291,7 +291,7 @@ export const Mercator = () => {
 };
 
 export const Globe1 = () => {
-  return <Story drag projection='mercator' scale={0.8} rotation={initialRotation} />;
+  return <Story drag projection='mercator' scale={0.8} rotation={initialRotation} styles={defaultStyles} />;
 };
 
 export const Globe2 = () => {

package/src/components/Globe/Globe.tsx

@@ -188,40 +188,36 @@ const GlobeCanvas = forwardRef<GlobeController, GlobeCanvasProps>(
 
     // External controller.
     const zooming = useRef(false);
-    useImperativeHandle<GlobeController, GlobeController>(
-      forwardRef,
-      () => {
-        return {
-          canvas,
-          projection,
-          center,
-          get scale() {
-            return scaleRef.current;
-          },
-          translation,
-          rotation,
-          setCenter,
-          setScale: (s) => {
-            if (typeof s === 'function') {
-              const is = interpolateNumber(scaleRef.current, s(scaleRef.current));
-              // Stop easing if already zooming.
-              transition()
-                .ease(zooming.current ? easeLinear : easeSinOut)
-                .duration(200)
-                .tween('scale', () => (t) => setScale(is(t)))
-                .on('end', () => {
-                  zooming.current = false;
-                });
-            } else {
-              setScale(s);
-            }
-          },
-          setTranslation,
-          setRotation,
-        };
-      },
-      [canvas],
-    );
+    useImperativeHandle<GlobeController, GlobeController>(forwardRef, () => {
+      return {
+        canvas,
+        projection,
+        center,
+        get scale() {
+          return scaleRef.current;
+        },
+        translation,
+        rotation,
+        setCenter,
+        setScale: (s) => {
+          if (typeof s === 'function') {
+            const is = interpolateNumber(scaleRef.current, s(scaleRef.current));
+            // Stop easing if already zooming.
+            transition()
+              .ease(zooming.current ? easeLinear : easeSinOut)
+              .duration(200)
+              .tween('scale', () => (t) => setScale(is(t)))
+              .on('end', () => {
+                zooming.current = false;
+              });
+          } else {
+            setScale(s);
+          }
+        },
+        setTranslation,
+        setRotation,
+      };
+    }, [canvas]);
 
     // https://d3js.org/d3-geo/path#geoPath
     // https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext

package/src/components/Map/Map.stories.tsx

@@ -4,7 +4,7 @@
 
 import '@dxos-theme';
 
-import { type StoryObj, type Meta } from '@storybook/react';
+import { type StoryObj, type Meta } from '@storybook/react-vite';
 import React, { useState } from 'react';
 
 import { withLayout, withTheme } from '@dxos/storybook-utils';

package/src/components/index.ts

@@ -2,7 +2,7 @@
 // Copyright 2019 DXOS.org
 //
 
-export * from './types';
+export type * from './types';
 
 export * from './Globe';
 export * from './Map';

package/src/index.ts

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

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