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

package/dist/lib/browser/index.mjs

@@ -4,7 +4,7 @@ import {
 
 // src/components/Globe/Globe.tsx
 import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
-import { geoMercator, geoOrthographic, geoPath as geoPath2, geoTransverseMercator, interpolateNumber, transition, easeLinear, easeSinOut } from "d3";
+import { easeLinear, easeSinOut, geoMercator, geoOrthographic, geoPath as geoPath2, geoTransverseMercator, interpolateNumber, transition } from "d3";
 import React3, { forwardRef, useEffect as useEffect4, useImperativeHandle, useMemo as useMemo2, useRef, useState as useState3 } from "react";
 import { useResizeDetector } from "react-resize-detector";
 import { useDynamicRef, useThemeContext } from "@dxos/react-ui";
@@ -15,23 +15,30 @@ import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
 import React, { createContext, useContext } from "react";
 import { raise } from "@dxos/debug";
 import { useControlledState } from "@dxos/react-ui";
+var defaults = {
+  center: {
+    lat: 51,
+    lng: 0
+  },
+  zoom: 4
+};
 var GlobeContext = /* @__PURE__ */ createContext(void 0);
-var GlobeContextProvider = ({ children, size, center: _center, scale: _scale, translation: _translation, rotation: _rotation }) => {
+var GlobeContextProvider = ({ children, size, center: centerParam = defaults.center, zoom: zoomParam = defaults.zoom, translation: translationParam, rotation: rotationParam }) => {
   var _effect = _useSignals();
   try {
-    const [center, setCenter] = useControlledState(_center);
-    const [scale, setScale] = useControlledState(_scale);
-    const [translation, setTranslation] = useControlledState(_translation);
-    const [rotation, setRotation] = useControlledState(_rotation);
+    const [center, setCenter] = useControlledState(centerParam);
+    const [zoom, setZoom] = useControlledState(zoomParam);
+    const [translation, setTranslation] = useControlledState(translationParam);
+    const [rotation, setRotation] = useControlledState(rotationParam);
     return /* @__PURE__ */ React.createElement(GlobeContext.Provider, {
       value: {
         size,
         center,
-        scale,
+        zoom,
         translation,
         rotation,
         setCenter,
-        setScale,
+        setZoom,
         setTranslation,
         setRotation
       }
@@ -64,7 +71,7 @@ var timer = (cb) => {
 };
 
 // src/util/inertia.ts
-import { select, drag, timer as timer2 } from "d3";
+import { drag, select, timer as timer2 } 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) => {
@@ -427,6 +434,7 @@ var cancelDrag = (node) => node.on(".drag", null);
 
 // src/hooks/useGlobeZoomHandler.ts
 import { useCallback } from "react";
+var ZOOM_FACTOR = 0.1;
 var useGlobeZoomHandler = (controller) => {
   return useCallback((event) => {
     if (!controller) {
@@ -434,11 +442,15 @@ var useGlobeZoomHandler = (controller) => {
     }
     switch (event) {
       case "zoom-in": {
-        controller.setScale((scale) => scale * 1.1);
+        controller.setZoom((zoom) => {
+          return zoom * (1 + ZOOM_FACTOR);
+        });
         break;
       }
       case "zoom-out": {
-        controller.setScale((scale) => scale * 0.9);
+        controller.setZoom((zoom) => {
+          return zoom * (1 - ZOOM_FACTOR);
+        });
         break;
       }
     }
@@ -523,8 +535,8 @@ var useSpinner = (controller, options = {}) => {
 };
 
 // src/hooks/useTour.ts
-import { geoPath, geoInterpolate, geoDistance, selection as d3Selection } from "d3";
-import { useEffect as useEffect3, useState as useState2, useMemo } from "react";
+import { selection as d3Selection, geoDistance, geoInterpolate, geoPath } from "d3";
+import { useEffect as useEffect3, useMemo, useState as useState2 } from "react";
 import versor2 from "versor";
 var TRANSITION_NAME = "globe-tour";
 var defaultDuration = 1500;
@@ -571,7 +583,7 @@ var useTour = (controller, points, options = {}) => {
               {
                 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",
@@ -583,7 +595,7 @@ var useTour = (controller, points, options = {}) => {
                 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(t22)
@@ -597,7 +609,7 @@ var useTour = (controller, points, options = {}) => {
             await transition2.end();
             last = next;
           }
-        } catch (err) {
+        } catch {
         } finally {
           setRunning(false);
         }
@@ -621,7 +633,24 @@ var useTour = (controller, points, options = {}) => {
 // src/components/Toolbar/Controls.tsx
 import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
 import React2 from "react";
-import { IconButton, Toolbar } from "@dxos/react-ui";
+import { IconButton, Toolbar, useTranslation } from "@dxos/react-ui";
+
+// src/translations.ts
+var translationKey = "react-ui-geo";
+var translations = [
+  {
+    "en-US": {
+      [translationKey]: {
+        "zoom in icon button": "Zoom in",
+        "zoom out icon button": "Zoom out",
+        "start icon button": "Start",
+        "toggle icon button": "Toggle"
+      }
+    }
+  }
+];
+
+// src/components/Toolbar/Controls.tsx
 var controlPositions = {
   topleft: "top-2 left-2",
   topright: "top-2 right-2",
@@ -631,26 +660,21 @@ var controlPositions = {
 var ZoomControls = ({ classNames, onAction }) => {
   var _effect = _useSignals2();
   try {
+    const { t } = useTranslation(translationKey);
     return /* @__PURE__ */ React2.createElement(Toolbar.Root, {
       classNames: [
-        "gap-1",
+        "gap-2",
         classNames
       ]
     }, /* @__PURE__ */ React2.createElement(IconButton, {
-      //
       icon: "ph--plus--regular",
-      label: "zoom in",
       iconOnly: true,
-      size: 5,
-      classNames: "px-0 aspect-square",
+      label: t("zoom in icon button"),
       onClick: () => onAction?.("zoom-in")
     }), /* @__PURE__ */ React2.createElement(IconButton, {
-      //
       icon: "ph--minus--regular",
-      label: "zoom out",
       iconOnly: true,
-      size: 5,
-      classNames: "px-0 aspect-square",
+      label: t("zoom out icon button"),
       onClick: () => onAction?.("zoom-out")
     }));
   } finally {
@@ -660,26 +684,21 @@ var ZoomControls = ({ classNames, onAction }) => {
 var ActionControls = ({ classNames, onAction }) => {
   var _effect = _useSignals2();
   try {
+    const { t } = useTranslation(translationKey);
     return /* @__PURE__ */ React2.createElement(Toolbar.Root, {
       classNames: [
-        "gap-1",
+        "gap-2",
         classNames
       ]
     }, /* @__PURE__ */ React2.createElement(IconButton, {
-      //
-      icon: "ph--play--regular",
-      label: "start",
+      icon: "ph--path--regular",
       iconOnly: true,
-      size: 5,
-      classNames: "px-0 aspect-square",
+      label: t("start icon button"),
       onClick: () => onAction?.("start")
     }), /* @__PURE__ */ React2.createElement(IconButton, {
-      //
       icon: "ph--globe-hemisphere-west--regular",
-      label: "toggle",
       iconOnly: true,
-      size: 5,
-      classNames: "px-0 aspect-square",
+      label: t("toggle icon button"),
       onClick: () => onAction?.("toggle")
     }));
   } finally {
@@ -760,18 +779,18 @@ var GlobeRoot = ({ classNames, children, ...props }) => {
     _effect.f();
   }
 };
-var GlobeCanvas = /* @__PURE__ */ forwardRef(({ projection: _projection, topology, features, styles: _styles }, forwardRef3) => {
+var GlobeCanvas = /* @__PURE__ */ forwardRef(({ projection: projectionParam, topology, features, styles: stylesParam }, forwardRef3) => {
   var _effect = _useSignals3();
   try {
     const { themeMode } = useThemeContext();
-    const styles = useMemo2(() => _styles ?? defaultStyles[themeMode], [
-      _styles,
+    const styles = useMemo2(() => stylesParam ?? defaultStyles[themeMode], [
+      stylesParam,
       themeMode
     ]);
     const [canvas, setCanvas] = useState3(null);
     const canvasRef = (canvas2) => setCanvas(canvas2);
-    const projection = useMemo2(() => getProjection(_projection), [
-      _projection
+    const projection = useMemo2(() => getProjection(projectionParam), [
+      projectionParam
     ]);
     const layers = useMemo2(() => {
       return timer(() => createLayers(topology, features, styles));
@@ -780,11 +799,11 @@ var GlobeCanvas = /* @__PURE__ */ forwardRef(({ projection: _projection, topolog
       features,
       styles
     ]);
-    const { size, center, scale, translation, rotation, setCenter, setScale, setTranslation, setRotation } = useGlobeContext();
-    const scaleRef = useDynamicRef(scale);
+    const { size, center, zoom, translation, rotation, setCenter, setZoom, setTranslation, setRotation } = useGlobeContext();
+    const zoomRef = useDynamicRef(zoom);
     useEffect4(() => {
       if (center) {
-        setScale(1);
+        setZoom(1);
         setRotation(positionToRotation(geoToPosition(center)));
       }
     }, [
@@ -796,20 +815,20 @@ var GlobeCanvas = /* @__PURE__ */ forwardRef(({ projection: _projection, topolog
         canvas,
         projection,
         center,
-        get scale() {
-          return scaleRef.current;
+        get zoom() {
+          return zoomRef.current;
         },
         translation,
         rotation,
         setCenter,
-        setScale: (s) => {
+        setZoom: (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 = interpolateNumber(zoomRef.current, s(zoomRef.current));
+            transition().ease(zooming.current ? easeLinear : easeSinOut).duration(200).tween("scale", () => (t) => setZoom(is(t))).on("end", () => {
               zooming.current = false;
             });
           } else {
-            setScale(s);
+            setZoom(s);
           }
         },
         setTranslation,
@@ -827,7 +846,7 @@ var GlobeCanvas = /* @__PURE__ */ forwardRef(({ projection: _projection, topolog
     useEffect4(() => {
       if (canvas && projection) {
         timer(() => {
-          projection.scale(Math.min(size.width, size.height) / 2 * scale).translate([
+          projection.scale(Math.min(size.width, size.height) / 2 * zoom).translate([
             size.width / 2 + (translation?.x ?? 0),
             size.height / 2 + (translation?.y ?? 0)
           ]).rotate(rotation ?? [
@@ -835,13 +854,13 @@ var GlobeCanvas = /* @__PURE__ */ forwardRef(({ projection: _projection, topolog
             0,
             0
           ]);
-          renderLayers(generator, layers, scale, styles);
+          renderLayers(generator, layers, zoom, styles);
         });
       }
     }, [
       generator,
       size,
-      scale,
+      zoom,
       translation,
       rotation,
       layers
@@ -861,14 +880,14 @@ var GlobeCanvas = /* @__PURE__ */ forwardRef(({ projection: _projection, topolog
 var GlobeDebug = ({ position = "topleft" }) => {
   var _effect = _useSignals3();
   try {
-    const { size, scale, translation, rotation } = useGlobeContext();
+    const { size, zoom, translation, rotation } = useGlobeContext();
     return /* @__PURE__ */ React3.createElement("div", {
-      className: mx("z-10 absolute w-96 p-2 overflow-hidden border border-green-700 rounded", controlPositions[position])
+      className: mx("z-10 absolute is-96 p-2 overflow-hidden border border-green-700 rounded", controlPositions[position])
     }, /* @__PURE__ */ React3.createElement("pre", {
       className: "font-mono text-xs text-green-700"
     }, JSON.stringify({
       size,
-      scale,
+      zoom,
       translation,
       rotation
     }, null, 2)));
@@ -896,35 +915,37 @@ var CustomControl = ({ position, children }) => {
     _effect.f();
   }
 };
+var GlobeZoom = ({ onAction, position = "bottomleft", ...props }) => {
+  var _effect = _useSignals3();
+  try {
+    return /* @__PURE__ */ React3.createElement(CustomControl, {
+      position,
+      ...props
+    }, /* @__PURE__ */ React3.createElement(ZoomControls, {
+      onAction
+    }));
+  } finally {
+    _effect.f();
+  }
+};
+var GlobeAction = ({ onAction, position = "bottomright", ...props }) => {
+  var _effect = _useSignals3();
+  try {
+    return /* @__PURE__ */ React3.createElement(CustomControl, {
+      position,
+      ...props
+    }, /* @__PURE__ */ React3.createElement(ActionControls, {
+      onAction
+    }));
+  } finally {
+    _effect.f();
+  }
+};
 var Globe = {
   Root: GlobeRoot,
   Canvas: GlobeCanvas,
-  Zoom: ({ onAction, position = "bottomleft", ...props }) => {
-    var _effect = _useSignals3();
-    try {
-      return /* @__PURE__ */ React3.createElement(CustomControl, {
-        position,
-        ...props
-      }, /* @__PURE__ */ React3.createElement(ZoomControls, {
-        onAction
-      }));
-    } finally {
-      _effect.f();
-    }
-  },
-  Action: ({ onAction, position = "bottomright", ...props }) => {
-    var _effect = _useSignals3();
-    try {
-      return /* @__PURE__ */ React3.createElement(CustomControl, {
-        position,
-        ...props
-      }, /* @__PURE__ */ React3.createElement(ActionControls, {
-        onAction
-      }));
-    } finally {
-      _effect.f();
-    }
-  },
+  Zoom: GlobeZoom,
+  Action: GlobeAction,
   Debug: GlobeDebug,
   Panel: GlobePanel
 };
@@ -932,108 +953,117 @@ var Globe = {
 // src/components/Map/Map.tsx
 import { useSignals as _useSignals4 } from "@preact-signals/safe-react/tracking";
 import "leaflet/dist/leaflet.css";
+import { createContext as createContext2 } from "@radix-ui/react-context";
 import L, { Control, DomEvent, DomUtil, latLngBounds } from "leaflet";
-import React4, { forwardRef as forwardRef2, useEffect as useEffect5, useImperativeHandle as useImperativeHandle2 } from "react";
+import React4, { forwardRef as forwardRef2, useEffect as useEffect5, useImperativeHandle as useImperativeHandle2, useRef as useRef2, useState as useState4 } from "react";
 import { createRoot } from "react-dom/client";
-import { MapContainer, Marker, Popup, TileLayer, useMap } from "react-leaflet";
-import { useResizeDetector as useResizeDetector2 } from "react-resize-detector";
-import { debounce } from "@dxos/async";
+import { MapContainer, Marker, Popup, TileLayer, useMap, useMapEvents } from "react-leaflet";
 import { ThemeProvider, Tooltip } from "@dxos/react-ui";
 import { defaultTx, mx as mx2 } from "@dxos/react-ui-theme";
-var defaults = {
-  // TODO(burdon): Guess location.
+var defaults2 = {
   center: {
     lat: 51,
     lng: 0
   },
   zoom: 4
 };
-var MapRoot = ({ classNames, center = defaults.center, zoom = defaults.zoom, ...props }) => {
+var [MapContextProvier, useMapContext] = createContext2("Map");
+var MapRoot = /* @__PURE__ */ forwardRef2(({ classNames, scrollWheelZoom = true, doubleClickZoom = true, touchZoom = true, center, zoom, onChange, ...props }, forwardedRef) => {
   var _effect = _useSignals4();
   try {
-    return /* @__PURE__ */ React4.createElement(MapContainer, {
-      className: mx2("relative grid grow bg-baseSurface", classNames),
-      attributionControl: false,
-      // TODO(burdon): Only if attention.
-      scrollWheelZoom: true,
-      zoomControl: false,
-      center,
-      zoom,
-      ...props
-    });
-  } finally {
-    _effect.f();
-  }
-};
-var MapCanvas = /* @__PURE__ */ forwardRef2(({ markers, center, zoom, onChange }, forwardedRef) => {
-  var _effect = _useSignals4();
-  try {
-    const { ref, width, height } = useResizeDetector2({
-      refreshRate: 200
-    });
-    const map = useMap();
+    const [attention, setAttention] = useState4(false);
+    const mapRef = useRef2(null);
+    const map = mapRef.current;
     useImperativeHandle2(forwardedRef, () => ({
       setCenter: (center2, zoom2) => {
-        map.setView(center2, zoom2);
+        mapRef.current?.setView(center2, zoom2);
       },
       setZoom: (cb) => {
-        map.setZoom(cb(map.getZoom()));
+        mapRef.current?.setZoom(cb(mapRef.current?.getZoom() ?? 0));
       }
-    }), [
-      map
-    ]);
+    }), []);
     useEffect5(() => {
-      if (width && height) {
-        map.invalidateSize();
+      if (!map) {
+        return;
       }
-    }, [
-      width,
-      height
-    ]);
-    useEffect5(() => {
-      if (center) {
-        map.setView(center, zoom);
-      } else if (zoom !== void 0) {
-        map.setZoom(zoom);
+      if (attention) {
+        map.scrollWheelZoom.enable();
+      } else {
+        map.scrollWheelZoom.disable();
       }
     }, [
-      center,
-      zoom
+      map,
+      attention
     ]);
-    useEffect5(() => {
-      const handler = debounce(() => {
+    return /* @__PURE__ */ React4.createElement(MapContextProvier, {
+      attention,
+      onChange
+    }, /* @__PURE__ */ React4.createElement(MapContainer, {
+      ...props,
+      ref: mapRef,
+      className: mx2("group relative grid bs-full is-full !bg-baseSurface dx-focus-ring-inset", classNames),
+      attributionControl: false,
+      zoomControl: false,
+      scrollWheelZoom,
+      doubleClickZoom,
+      touchZoom,
+      center: center ?? defaults2.center,
+      zoom: zoom ?? defaults2.zoom
+    }));
+  } finally {
+    _effect.f();
+  }
+});
+MapRoot.displayName = "Map.Root";
+var MapTiles = (_props) => {
+  var _effect = _useSignals4();
+  try {
+    const ref = useRef2(null);
+    const { onChange } = useMapContext(MapTiles.displayName);
+    useMapEvents({
+      zoomstart: (ev) => {
         onChange?.({
-          center: map.getCenter(),
-          zoom: map.getZoom()
+          center: ev.target.getCenter(),
+          zoom: ev.target.getZoom()
         });
-      }, 100);
-      map.on("move", handler);
-      map.on("zoom", handler);
-      return () => {
-        map.off("move", handler);
-        map.off("zoom", handler);
-      };
+      }
+    });
+    const { attention } = useMapContext(MapTiles.displayName);
+    useEffect5(() => {
+      if (ref.current) {
+        ref.current.getContainer().dataset.attention = attention ? "1" : "0";
+      }
     }, [
-      map,
-      onChange
+      attention
     ]);
+    return /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(TileLayer, {
+      ref,
+      "data-attention": attention,
+      detectRetina: true,
+      className: 'dark:grayscale dark:invert data-[attention="0"]:!opacity-80',
+      url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
+      keepBuffer: 4
+    }));
+  } finally {
+    _effect.f();
+  }
+};
+MapTiles.displayName = "Map.Tiles";
+var MapMarkers = ({ selected, markers }) => {
+  var _effect = _useSignals4();
+  try {
+    const map = useMap();
     useEffect5(() => {
       if (markers.length > 0) {
         const bounds = latLngBounds(markers.map((marker) => marker.location));
         map.fitBounds(bounds);
       } else {
-        map.setView(defaults.center, defaults.zoom);
+        map.setView(defaults2.center, defaults2.zoom);
       }
     }, [
       markers
     ]);
-    return /* @__PURE__ */ React4.createElement("div", {
-      ref,
-      className: "flex w-full h-full overflow-hidden bg-baseSurface"
-    }, /* @__PURE__ */ React4.createElement(TileLayer, {
-      className: "dark:filter dark:grayscale dark:invert",
-      url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-    }), markers?.map(({ id, title, location: { lat, lng } }) => {
+    return /* @__PURE__ */ React4.createElement(React4.Fragment, null, markers?.map(({ id, title, location: { lat, lng } }) => {
       return /* @__PURE__ */ React4.createElement(Marker, {
         key: id,
         position: {
@@ -1042,6 +1072,7 @@ var MapCanvas = /* @__PURE__ */ forwardRef2(({ markers, center, zoom, onChange }
         },
         icon: (
           // TODO(burdon): Create custom icon from bundled assets.
+          // TODO(burdon): Selection state.
           new L.Icon({
             iconUrl: "https://dxos.network/marker-icon.png",
             iconRetinaUrl: "https://dxos.network/marker-icon-2x.png",
@@ -1069,7 +1100,8 @@ var MapCanvas = /* @__PURE__ */ forwardRef2(({ markers, center, zoom, onChange }
   } finally {
     _effect.f();
   }
-});
+};
+MapMarkers.displayName = "Map.Markers";
 var CustomControl2 = ({ position, children }) => {
   var _effect = _useSignals4();
   try {
@@ -1102,35 +1134,38 @@ var CustomControl2 = ({ position, children }) => {
     _effect.f();
   }
 };
+var MapZoom = ({ onAction, position = "bottomleft", ...props }) => {
+  var _effect = _useSignals4();
+  try {
+    return /* @__PURE__ */ React4.createElement(CustomControl2, {
+      position,
+      ...props
+    }, /* @__PURE__ */ React4.createElement(ZoomControls, {
+      onAction
+    }));
+  } finally {
+    _effect.f();
+  }
+};
+var MapAction = ({ onAction, position = "bottomright", ...props }) => {
+  var _effect = _useSignals4();
+  try {
+    return /* @__PURE__ */ React4.createElement(CustomControl2, {
+      position,
+      ...props
+    }, /* @__PURE__ */ React4.createElement(ActionControls, {
+      onAction
+    }));
+  } finally {
+    _effect.f();
+  }
+};
 var Map = {
   Root: MapRoot,
-  Canvas: MapCanvas,
-  Zoom: ({ onAction, position = "bottomleft", ...props }) => {
-    var _effect = _useSignals4();
-    try {
-      return /* @__PURE__ */ React4.createElement(CustomControl2, {
-        position,
-        ...props
-      }, /* @__PURE__ */ React4.createElement(ZoomControls, {
-        onAction
-      }));
-    } finally {
-      _effect.f();
-    }
-  },
-  Action: ({ onAction, position = "bottomright", ...props }) => {
-    var _effect = _useSignals4();
-    try {
-      return /* @__PURE__ */ React4.createElement(CustomControl2, {
-        position,
-        ...props
-      }, /* @__PURE__ */ React4.createElement(ActionControls, {
-        onAction
-      }));
-    } finally {
-      _effect.f();
-    }
-  }
+  Tiles: MapTiles,
+  Markers: MapMarkers,
+  Zoom: MapZoom,
+  Action: MapAction
 };
 export {
   ActionControls,
@@ -1152,6 +1187,8 @@ export {
   renderLayers,
   restrictAxis,
   timer,
+  translationKey,
+  translations,
   useDrag,
   useGlobeContext,
   useGlobeZoomHandler,