@dxos/react-ui-geo 0.8.2-main.fbd8ed0 → 0.8.2-staging.7ac8446

package/dist/lib/browser/index.mjs

@@ -3,8 +3,8 @@ import {
 } from "./chunk-ENCWOTYX.mjs";
 
 // packages/ui/react-ui-geo/src/components/Globe/Globe.tsx
-import { geoMercator, geoOrthographic, geoPath as geoPath2, geoTransverseMercator, interpolateNumber, transition, easeLinear, easeSinOut } from "d3";
-import React3, { forwardRef, useEffect as useEffect4, useImperativeHandle, useMemo as useMemo2, useRef, useState as useState3 } from "react";
+import * as d37 from "d3";
+import React3, { forwardRef, useEffect as useEffect4, useImperativeHandle, useMemo, useRef, useState as useState3 } from "react";
 import { useResizeDetector } from "react-resize-detector";
 import { useDynamicRef, useThemeContext } from "@dxos/react-ui";
 import { mx } from "@dxos/react-ui-theme";
@@ -38,7 +38,7 @@ var useGlobeContext = () => {
 };
 
 // packages/ui/react-ui-geo/src/hooks/useDrag.ts
-import { select as select2 } from "d3";
+import * as d34 from "d3";
 import { useEffect } from "react";
 
 // packages/ui/react-ui-geo/src/util/debug.ts
@@ -57,7 +57,7 @@ var timer = (cb) => {
 };
 
 // packages/ui/react-ui-geo/src/util/inertia.ts
-import { select, drag, timer as timer2 } from "d3";
+import * as d3 from "d3";
 import versor from "versor";
 var restrictAxis = (axis) => (original, current) => current.map((d, i) => axis[i] ? d : original[i]);
 var geoInertiaDrag = (target, render, projection, options) => {
@@ -67,7 +67,7 @@ var geoInertiaDrag = (target, render, projection, options) => {
   if (target.node) {
     target = target.node();
   }
-  target = select(target);
+  target = d3.select(target);
   const inertia = geoInertiaDragHelper({
     projection,
     render: (rotation) => {
@@ -91,7 +91,7 @@ var geoInertiaDrag = (target, render, projection, options) => {
     time: options.time,
     hold: options.hold
   });
-  target.call(drag().on("start", inertia.start).on("drag", inertia.move).on("end", inertia.end));
+  target.call(d3.drag().on("start", inertia.start).on("drag", inertia.move).on("end", inertia.end));
   return inertia;
 };
 var geoInertiaDragHelper = (opt) => {
@@ -152,7 +152,7 @@ function inertiaHelper(opt) {
       0,
       0
     ],
-    timer: timer2(() => {
+    timer: d3.timer(() => {
     }),
     time: 0,
     t: 0,
@@ -232,7 +232,7 @@ function inertiaHelper(opt) {
 }
 
 // packages/ui/react-ui-geo/src/util/path.ts
-import { geoCircle as d3GeoCircle } from "d3";
+import * as d32 from "d3";
 var positionToRotation = ([lng, lat], tilt = 0) => [
   -lng,
   tilt - lat,
@@ -246,7 +246,7 @@ var geoPoint = (point) => ({
   type: "Point",
   coordinates: geoToPosition(point)
 });
-var geoCircle = ({ lat, lng }, radius) => d3GeoCircle().radius(radius).center([
+var geoCircle2 = ({ lat, lng }, radius) => d32.geoCircle().radius(radius).center([
   lng,
   lat
 ])();
@@ -285,8 +285,8 @@ var getDistance = (point1, point2) => {
 };
 
 // packages/ui/react-ui-geo/src/util/render.ts
-import { geoGraticule } from "d3";
-import { feature, mesh } from "topojson-client";
+import * as d33 from "d3";
+import * as topojson from "topojson-client";
 var createLayers = (topology, features, styles) => {
   const layers = [];
   if (styles.water) {
@@ -300,7 +300,7 @@ var createLayers = (topology, features, styles) => {
   if (styles.graticule) {
     layers.push({
       styles: styles.graticule,
-      path: geoGraticule().step([
+      path: d33.geoGraticule().step([
         6,
         6
       ])()
@@ -310,13 +310,13 @@ var createLayers = (topology, features, styles) => {
     if (topology.objects.land && styles.land) {
       layers.push({
         styles: styles.land,
-        path: feature(topology, topology.objects.land)
+        path: topojson.feature(topology, topology.objects.land)
       });
     }
     if (topology.objects.countries && styles.border) {
       layers.push({
         styles: styles.border,
-        path: mesh(topology, topology.objects.countries, (a, b) => a !== b)
+        path: topojson.mesh(topology, topology.objects.countries, (a, b) => a !== b)
       });
     }
     if (topology.objects.dots && styles.dots) {
@@ -390,7 +390,7 @@ var useDrag = (controller, options = {}) => {
     if (!canvas || options.disabled) {
       return;
     }
-    geoInertiaDrag(select2(canvas), () => {
+    geoInertiaDrag(d34.select(canvas), () => {
       controller.setRotation(controller.projection.rotate());
       options.onUpdate?.({
         type: "move",
@@ -409,7 +409,7 @@ var useDrag = (controller, options = {}) => {
       })
     });
     return () => {
-      cancelDrag(select2(canvas));
+      cancelDrag(d34.select(canvas));
     };
   }, [
     controller,
@@ -463,12 +463,12 @@ var useMapZoomHandler = (controller) => {
 };
 
 // packages/ui/react-ui-geo/src/hooks/useSpinner.ts
-import { timer as d3Timer } from "d3";
+import * as d35 from "d3";
 import { useEffect as useEffect2, useState } from "react";
 var useSpinner = (controller, options = {}) => {
   const [running, setRunning] = useState(false);
   useEffect2(() => {
-    let timer3;
+    let timer4;
     const start = () => {
       const delta = options.delta ?? [
         1e-3,
@@ -477,7 +477,7 @@ var useSpinner = (controller, options = {}) => {
       ];
       let t = 0;
       let lastRotation = controller.projection.rotate();
-      timer3 = d3Timer((elapsed) => {
+      timer4 = d35.timer((elapsed) => {
         const dt = elapsed - t;
         t = elapsed;
         const rotation = [
@@ -490,9 +490,9 @@ var useSpinner = (controller, options = {}) => {
       });
     };
     const stop = () => {
-      if (timer3) {
-        timer3.stop();
-        timer3 = void 0;
+      if (timer4) {
+        timer4.stop();
+        timer4 = void 0;
       }
     };
     if (controller && running) {
@@ -516,17 +516,19 @@ var useSpinner = (controller, options = {}) => {
 };
 
 // packages/ui/react-ui-geo/src/hooks/useTour.ts
-import { geoPath, geoInterpolate, geoDistance, selection as d3Selection } from "d3";
-import { useEffect as useEffect3, useState as useState2, useMemo } from "react";
+import * as d36 from "d3";
+import { useEffect as useEffect3, useState as useState2 } from "react";
 import versor2 from "versor";
+import { log } from "@dxos/log";
+var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-geo/src/hooks/useTour.ts";
 var TRANSITION_NAME = "globe-tour";
 var defaultDuration = 1500;
 var useTour = (controller, points, options = {}) => {
-  const selection = useMemo(() => d3Selection(), []);
+  const selection2 = d36.selection();
   const [running, setRunning] = useState2(options.running ?? false);
   useEffect3(() => {
     if (!running) {
-      selection.interrupt(TRANSITION_NAME);
+      selection2.interrupt(TRANSITION_NAME);
       return;
     }
     let t;
@@ -536,7 +538,7 @@ var useTour = (controller, points, options = {}) => {
         const context = canvas.getContext("2d", {
           alpha: false
         });
-        const path = geoPath(projection, context).pointRadius(2);
+        const path = d36.geoPath(projection, context).pointRadius(2);
         const tilt = options.tilt ?? 0;
         let last;
         try {
@@ -552,12 +554,12 @@ var useTour = (controller, points, options = {}) => {
             }
             const p1 = last ? geoToPosition(last) : void 0;
             const p2 = geoToPosition(next);
-            const ip = geoInterpolate(p1 || p2, p2);
-            const distance = geoDistance(p1 || p2, p2);
+            const ip = d36.geoInterpolate(p1 || p2, p2);
+            const distance = d36.geoDistance(p1 || p2, p2);
             const r1 = p1 ? positionToRotation(p1, tilt) : controller.projection.rotate();
             const r2 = positionToRotation(p2, tilt);
             const iv = versor2.interpolate(r1, r2);
-            const transition2 = selection.transition(TRANSITION_NAME).duration(Math.max(options.duration ?? defaultDuration, distance * 2e3)).tween("render", () => (t2) => {
+            const transition2 = selection2.transition(TRANSITION_NAME).duration(Math.max(options.duration ?? defaultDuration, distance * 2e3)).tween("render", () => (t2) => {
               const t1 = Math.max(0, Math.min(1, t2 * 2 - 1));
               const t22 = Math.min(1, t2 * 2);
               context.save();
@@ -584,20 +586,28 @@ var useTour = (controller, points, options = {}) => {
                 context.fill();
               }
               context.restore();
-              projection.rotate(iv(t2));
-              setRotation(projection.rotate());
+              if (options.autoRotate) {
+                projection.rotate(iv(t2));
+                setRotation(projection.rotate());
+              }
             });
             await transition2.end();
             last = next;
           }
         } catch (err) {
+          log.catch(err, void 0, {
+            F: __dxlog_file,
+            L: 112,
+            S: void 0,
+            C: (f, a) => f(...a)
+          });
         } finally {
           setRunning(false);
         }
       });
       return () => {
         clearTimeout(t);
-        selection.interrupt(TRANSITION_NAME);
+        selection2.interrupt(TRANSITION_NAME);
       };
     }
   }, [
@@ -713,16 +723,16 @@ var defaultStyles = {
   }
 };
 var projectionMap = {
-  orthographic: geoOrthographic,
-  mercator: geoMercator,
-  "transverse-mercator": geoTransverseMercator
+  orthographic: d37.geoOrthographic,
+  mercator: d37.geoMercator,
+  "transverse-mercator": d37.geoTransverseMercator
 };
 var getProjection = (type = "orthographic") => {
   if (typeof type === "string") {
-    const constructor = projectionMap[type] ?? geoOrthographic;
+    const constructor = projectionMap[type] ?? d37.geoOrthographic;
     return constructor();
   }
-  return type ?? geoOrthographic();
+  return type ?? d37.geoOrthographic();
 };
 var GlobeRoot = ({ classNames, children, ...props }) => {
   const { ref, width, height } = useResizeDetector();
@@ -739,16 +749,16 @@ var GlobeRoot = ({ classNames, children, ...props }) => {
 };
 var GlobeCanvas = /* @__PURE__ */ forwardRef(({ projection: _projection, topology, features, styles: _styles }, forwardRef3) => {
   const { themeMode } = useThemeContext();
-  const styles = useMemo2(() => _styles ?? defaultStyles[themeMode], [
+  const styles = useMemo(() => _styles ?? defaultStyles[themeMode], [
     _styles,
     themeMode
   ]);
   const [canvas, setCanvas] = useState3(null);
   const canvasRef = (canvas2) => setCanvas(canvas2);
-  const projection = useMemo2(() => getProjection(_projection), [
+  const projection = useMemo(() => getProjection(_projection), [
     _projection
   ]);
-  const layers = useMemo2(() => {
+  const layers = useMemo(() => {
     return timer(() => createLayers(topology, features, styles));
   }, [
     topology,
@@ -779,8 +789,8 @@ var GlobeCanvas = /* @__PURE__ */ forwardRef(({ projection: _projection, topolog
       setCenter,
       setScale: (s) => {
         if (typeof s === "function") {
-          const is = interpolateNumber(scaleRef.current, s(scaleRef.current));
-          transition().ease(zooming.current ? easeLinear : easeSinOut).duration(200).tween("scale", () => (t) => setScale(is(t))).on("end", () => {
+          const is = d37.interpolateNumber(scaleRef.current, s(scaleRef.current));
+          d37.transition().ease(zooming.current ? d37.easeLinear : d37.easeSinOut).duration(200).tween("scale", () => (t) => setScale(is(t))).on("end", () => {
             zooming.current = false;
           });
         } else {
@@ -793,7 +803,7 @@ var GlobeCanvas = /* @__PURE__ */ forwardRef(({ projection: _projection, topolog
   }, [
     canvas
   ]);
-  const generator = useMemo2(() => canvas && projection && geoPath2(projection, canvas.getContext("2d", {
+  const generator = useMemo(() => canvas && projection && d37.geoPath(projection, canvas.getContext("2d", {
     alpha: false
   })), [
     canvas,
@@ -1054,7 +1064,7 @@ export {
   closestPoint,
   controlPositions,
   createLayers,
-  geoCircle,
+  geoCircle2 as geoCircle,
   geoInertiaDrag,
   geoLine,
   geoPoint,